<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script> <script type="text/javascript"> $().ready(function() { var validate= $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: { required: "请输入Email地址", email: "请输入正确的email地址" }, password: { required: "请输入密码", minlength: "密码不能小于{0}个字 符" }, confirm_password: { required: "确认密码", minlength: "确认密码不能小于5个字符", equalTo: "两次输入密码不一致不一致" } }, //把错误信息放到一处处理与 errorPlacement 函数连用 groups:{ login:"firstname email password confirm_password" }, errorPlacement:function(error,element){ error.insertBefore("#error_info"); }, //提交表单后焦点在第一个错误表单内 focusInvalid:true, //指定错误提示的css类名 errorClass:"error_info", //指定验证通过的css类名 validClass:"success_info", //验证通过提交表单 submitHandler:function(form){ console.info("提交表单"+$(form).serialize()); }, invalidHandler:function(event,validator){ console.info("表单错误"+validate.numberOfInvalids()); }, // 取消某个元素的校验 ignore:"#firstname", onfocusout:function(){ return false; } }); $("#check").click(function(){ var flag1=$("#signupForm").valid();//检查表单是否有效 var flag2=$("#firstname").rules();//查询元素的校验规则 var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则 var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则 var flag5=validate.form();//验证表单是否有效 var flag6=validate.element("#firstname");//验证表单某个元素是否有效 validate.resetForm();//恢复表单原来的状态 var flag7=validate.numberOfInvalids();//获得错误元素个数 console.info(flag7); }); //针对某个元素显示特定的提示信息 validate.showErrors({ firstname:"ERROR" }); }); </script> </head> <body> <form id="signupForm" method="get" action=""> <p id="error_info"> <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> <p> <input class="c" type="button" value="检查表单是否有效" id="check"/> </p> </form> </body> </html>