HTML登陸拖動排序驗證代碼
HTML是一種常用的網頁設計語言,常用于構建Web頁面。在Web開發中,登錄驗證是非常常見的要求。
如果您需要對用戶輸入的數據進行排序驗證,則可以使用拖動排序驗證代碼。此代碼將允許用戶拖動其輸入的數據以進行排序,并將結果提交給服務器進行驗證。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登錄拖動排序驗證代碼</title> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; background-color: #A0A0A0; border: 1px solid #C0C0C0; border-radius: 4px; text-align: center; font-weight: bold; cursor: move; } #sortable li:hover { background-color: #E0E0E0; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); } ); </script> </head> <body> <p>請將下面的詞匯按您的選擇排序,并提交:</p> <ul id="sortable"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Python</li> <li>Java</li> <li>MySQL</li> <li>PHP</li> <li>C++</li> </ul> <button onclick="submitForm()">提交</button> <script> function submitForm(){ var list = $("#sortable li"); var values = $.map(list, function(li){ return $(li).text(); }); var sortedList = values.join(","); alert("您選擇的順序是:" + sortedList); } </script> </body> </html>
上述代碼使用jQuery UI的sortable函數實現了可拖動排序的效果。用戶可以點擊每個詞匯并將其拖到另一個位置,以重新排列他們。
代碼還包括一個提交按鈕,這將輸出用戶選擇的詞匯以及其選擇的順序。
總之,HTML中的拖動排序驗證代碼是一種靈活的方法,可幫助您實現安全且易于操作的登錄驗證策略。