jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
下面通过一段代码demo给大家讲解jquery validate ，具体代码如下所示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://www.jb51.net/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 method="get" action=""> <p> <label for="firstname">Firstname</label> <input /> </p> <p> <label for="email">E-Mail</label> <input /> </p> <p> <label for="password">Password</label> <input type="password" /> </p> <p> <label for="confirm_password">确认密码</label> <input type="password" /> </p> <p> <input type="submit" value="Submit"/> </p> <p> <input type="button" value="检查表单是否有效"/> </p> </form> </body> </html>