<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form id="signupForm" method="get" action=""> <div class="error"></div> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname"/> </p> <p> <label for="email">E-Mail</label> <input id="email" name="email"/> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password"/> </p> <p> <label for="confirm_password">確認密碼</label> <input id="confirm_password" name="confirm_password" type="password"/> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </form> <input id="reset" type="button" value="重置表單"/> <script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.validate.js"></script> <script> (function() { $.validator.setDefaults({ debug: true }) var validator = $("#signupForm").validate({ rules: {//驗證規則 firstname: "required", email: { required: true, email: true, // remote: {//遠端驗證 // url: "check-email.php", // type: "post", // data: { // username: function() { // return $("#username").val(); // } // } // } }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: {//錯誤消息 firstname: "請輸入姓名", email: { required: "請輸入Email地址", email: "請輸入正確的email地址" }, password: { required: "請輸入密碼", minlength: $.validator.format("密碼不能小於{0}個字符") }, confirm_password: { required: "請輸入確認密碼", minlength: "確認密碼不能小於5個字符", equalTo: "兩次輸入密碼不一致不一致" } }, // errorPlacement: function(error, element) {//顯示錯誤消息的位置 // if (element.is(":radio")) // error.appendTo(element.parent().next().next()); // else if (element.is(":checkbox")) // error.appendTo(element.next()); // else // error.appendTo(element.parent().next()); // }, // errorClass: "invalid", //錯誤消息框的類 // errorElement: "a", //錯誤消息框的元素 // errorContainer: "div.error", //當驗證時顯示或隱藏這個容器 // errorLabelContainer: "#signupForm div.error",//當驗證時顯示或隱藏這個容器 // wrapper: "li",//包裹住單條錯誤信息 // success: function(label) {//驗證成功后的操作 // label.addClass("valid").text("Ok!") // }, // onsubmit: false, //提交表單時驗證 // onfocusout: false, //失去焦點是驗證 // onkeyup: false,//這個好像不能用也許是我jquery版本太高了 submitHandler: function(form) {//處理程序 alert("submitted"); //form.submit(); } }); // 郵政編碼驗證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "請正確填寫您的郵政編碼"); // 中文字兩個字節 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for (var i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127) { length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)")); //重置錯誤信息 $("#reset").click(function() { validator.resetForm(); }); //原文http://blog.csdn.net/phiberg/article/details/7344853?reload })(); </script> </body> </html>