源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> <script src="http://static./assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static./assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static./assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script> $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { // 提交時驗證表單 var validator = $("#form1").validate({ errorPlacement: function(error, element) { // Append error within linked label $( element ) .closest( "form" ) .find( "label[for='" + element.attr( "id" ) + "']" ) .append( error ); }, errorElement: "span", messages: { user: { required: " (必需字段)", minlength: " (不能少於 3 個字母)" }, password: { required: " (必需字段)", minlength: " (字母不能少於 5 個且不能大於 12 個)", maxlength: " (字母不能少於 5 個且不能大於 12 個)" } } }); $(".cancel").click(function() { validator.resetForm(); }); }); </script> <style> .error{ color:red; } </style> </head> <body> <form method="get" class="cmxform" id="form1" action=""> <fieldset> <legend>登錄框</legend> <p> <label for="user">用戶名</label> <input id="user" name="user" required minlength="3"> </p> <p> <label for="password">密碼</label> <input id="password" type="password" maxlength="12" name="password" required minlength="5"> </p> <p> <input class="submit" type="submit" value="Login"> </p> </fieldset> </form> </body> </html>
運行結果