<!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>