jquery-validator中js校验及标签校验的使用：
1.项目中引入jquery.validate.js 官方网站:http://bassistance.de/ http://jqueryvalidation.org/
2.js校验方式（自定义规则校验，扩展校验）：
js有默认的校验规则如：required、email、number等，下面是自定义新的校验规则：
??//证件号码 ???jQuery.validator.addMethod("number", function(value, element){ ???????return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value); ???}, ""); //number表示新增方法的方法名 ???//邮编 ???jQuery.validator.addMethod("Postcode", function(value, element) { ???????var tel = /^[0-9]{6}$/; ???????return this.optional(element) || (tel.test(value)); ???}, ""); ???//登录密码 ???jQuery.validator.addMethod("password", function(value, element){ ???????return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value); ???}, ""); ???//理顾工号 ???jQuery.validator.addMethod("jobnumber", function(value, element){ ???????return this.optional(element) ||/^[H][0-9]+$/.test(value); ???}, ""); ???//手机号码 ???jQuery.validator.addMethod("basicnum", function(value, element){ ???????return this.optional(element) ||regMobile.test(value); ???}, ""); //表单序列化 ???$("#formId").validate({ ???????ignore: "hidden",//验证属性为hidden的元素 ???????submitHandler: function() { ???????????//验证通过后 的js代码写在这里 ???????}, ???????rules: { ???????????number: { ???//密码2的描述多于1项使用对象类型 ???????????????number: true ?????????//使用自定义的验证规则,在上例中新增的部分 ???????????}, ???????????Postcode:{ //标签的name值 ???????????????Postcode:true ?//方法名 ???????????}, ???????????password:{ ???????????????password:true ???????????}, ???????????jobnumber:{ ???????????????jobnumber:true ???????????}, ???????????basicnum:{ ???????????????basicnum:true ???????????} ???????}, ???????messages: { ???????????number: { ???????????????number: "证件号码只能是数字、字母" ???????????}, ???????????Postcode: { ???????????????Postcode: "请正确填写您的邮政编码" ???????????}, ???????????password: { ???????????????password: "密码只能是数字、字母" ???????????}, ???????????jobnumber: { ???????????????jobnumber: "只能是H+6位数字的格式,例如‘H002200‘" ???????????}, ???????????basicnum: { ???????????????basicnum: "请输入正确的手机号" ???????????} ???????} ???})3.标签校验及js校验(两种校验方式)：
一、默认验证规则
| required:true | 必须填写 |
| remote:”check.php” | 使用ajax方法调用check.php验证输入值(check.php返回true或false字符串) |
| email:true | 必须输入有效的电子邮件 |
| url:true | 必须输入有效的网址 |
| date:true | 必须入有效的日期 |
| dateISO:true | 必须入有效的日期 (YYYY-MM-DD)，例如：2014-06-25，1998/06/09 只验证格式，不验证有效性 |
| number:true | 必须输入正确的数字(负数，小数) |
| digits:true | 只可输入数字 |
| creditcard:true | 必须输入有效的信用卡号码 |
| equalTo:”#field” | 必须输入和#field相同的值 |
| extension | 必须输入有效的后缀 |
| maxlength:10 | 输入长度最多 10 个字符串(汉字算一个字符) |
| minlength:5 | 输入长度最少 5 个字符串(汉字算一个字符) |
| rangelength:[5,10] | 输入长度为必须介于 5 至 10 之间的字符串(汉字算一个字符) |
| range:[5,10] | 输入数值必须介于 5 至 10 之间 |
| max:10 | 输入数值不能大于 10 |
| min:5 | 输入数值不能小于 5 |
二、默认的提示
messages: { ???required: "This field is required.", ???remote: "Please fix this field.", ???email: "Please enter a valid email address.", ???url: "Please enter a valid URL.", ???date: "Please enter a valid date.", ???dateISO: "Please enter a valid date ( ISO ).", ???number: "Please enter a valid number.", ???digits: "Please enter only digits.", ???creditcard: "Please enter a valid credit card number.", ???equalTo: "Please enter the same value again.", ???maxlength: $.validator.format( "Please enter no more than {0} characters." ), ???minlength: $.validator.format( "Please enter at least {0} characters." ), ???rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), ???range: $.validator.format( "Please enter a value between {0} and {1}." ), ???max: $.validator.format( "Please enter a value less than or equal to {0}." ), ???min: $.validator.format( "Please enter a value greater than or equal to {0}." )},可以使用中文的提示，引入messages_zh.js（在src/localization目录中）
觉得麻烦,一次要引入两个js,可以拿中文的提示覆盖jquery.validate.js中的英文提示(反正我会这么干，毕竟多数情况都中文的)，如下：
messages: { ???required: "必须填写", ???remote: "请修正此栏位", ???email: "请输入有效的电子邮件", ???url: "请输入有效的网址", ???date: "请输入有效的日期", ???dateISO: "请输入有效的日期 (YYYY-MM-DD)", ???number: "请输入正确的数字", ???digits: "只可输入数字", ???creditcard: "请输入有效的信用卡号码", ???equalTo: "你的输入不相同", ???extension: "请输入有效的后缀", ???maxlength: $.validator.format("最多 {0} 个字"), ???minlength: $.validator.format("最少 {0} 个字"), ???rangelength: $.validator.format("请输入长度为 {0} 至 {1} 之間的字串"), ???range: $.validator.format("请输入 {0} 至 {1} 之间的数值"), ???max: $.validator.format("请输入不大于 {0} 的数值"), ???min: $.validator.format("请输入不小于 {0} 的数值")},三、使用方式（两种）
1.将校验规则写到控件中
看了之前的别人写的文章，貌似是依赖jquery.metadata.js这个库，然后写的时候以 class=”required email” 这样的形式来写，这样写起来好像有些乱，class本身是呈现样式的，现在被附上各种校验的规则，看上去似乎有些乱，不过好在新版本中，又有了新的写法，不依赖上面的js库，以 data-rule-验证规则、data-msg-提示信息 这样的格式来重新定义，更简单，更直观，更强大了。
<script src="../js/jquery.js"></script><script src="../js/jquery.validate.js"></script><script> ?$().ready(function() { ???$("#registerForm").validate(); ?});</script> <form id="registerForm" method="get" action=""> ?<fieldset> ???<p> ?????<label for="cusername">用户名</label> ?????<input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符"> ???</p> ???<p> ?????<label for="cpassword">密码</label> ?????<input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码"> ???</p> ???<p> ?????<label for="cconfirmpassword">确认密码</label> ?????<input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致"> ???</p> ???<p> ?????<label for="cemail">邮箱</label> ?????<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确"> ?????</input> ???</p> ???<p> ?????<label for="chasreferee">有推荐人请勾选</label> ?????<input type="checkbox" id="chasreferee" name="hasreferee"> ???</p> ???<p> ?????<label for="creferee">推荐人</label> ?????<input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空"> ?????</input> ???</p> ???<p> ?????<input type="submit" value="提交"> ???</p> ?</fieldset></form>2.将校验规则写到代码中
个人感觉第一种写法，更适合做软件开发或是网站后台，而第二种写法更适合做网站的前台，对页面加载速度有苛刻的要求的时候，可以把脚本代码封装成一个单独的js，以提高网页的加载速度。
<script src="../js/jquery.js"></script><script src="../js/jquery.validate.js"></script><script>$().ready(function() { ?$("#registerForm").validate({ ????rules: { ?????username: { ???????required: true, ???????rangelength: [2, 20] ?????}, ?????password: { ???????required: true, ???????minlength: 6 ?????}, ?????confirmpassword: { ???????equalTo: "#cpassword" ?????}, ?????email: { ???????required: true, ???????email: true ?????}, ?????referee: { ???????required: "#chasreferee:checked" ?????} ????}, ???messages: { ?????username: { ???????required: "用户名不能为空", ???????rangelength: "用户名长度必须是2到10个字符" ?????}, ?????password: { ???????required: "密码不能为空", ???????minlength: "至少设置6位密码" ?????}, ?????confirmpassword: { ???????equalTo: "两次密码不一致" ?????}, ?????email: { ???????required: "邮箱不能为空", ???????email: "邮箱的格式不正确" ?????}, ?????referee: { ???????required: "推荐人不能为空" ?????} ???} ??});});</script> <form id="registerForm" method="get" action=""> ?<fieldset> ???<p> ?????<label for="cusername">用户名</label> ?????<input id="cusername" name="username" type="text"> ???</p> ???<p> ?????<label for="cpassword">密码</label> ?????<input id="cpassword" name="password" type="password"> ???</p> ???<p> ?????<label for="cconfirmpassword">确认密码</label> ?????<input id="cconfirmpassword" name="confirmpassword" type="password"> ???</p> ???<p> ?????<label for="cemail">邮箱</label> ?????<input id="cemail" name="email"> ?????</input> ???</p> ???<p> ?????<label for="chasreferee">有推荐人请勾选</label> ?????<input type="checkbox" id="chasreferee" name="hasreferee"> ???</p> ???<p> ?????<label for="creferee">推荐人</label> ?????<input id="creferee" name="referee"> ?????</input> ???</p> ???<p> ?????<input type="submit" value="提交"> ???</p> ?</fieldset></form>四、常用方法及注意事项
1.用其他方式替代默认的SUBMIT（此种方法可以解决编辑内容时，所有内容验证通过表单不提交的问题）
$("#registerForm").validate({ ???submitHandler:function(form){ ???form.submit();}});也可以设置validate的默认值
$.validator.setDefaults({ ???submitHandler: function (form) { ???form.submit();}});2.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
$("#registerForm").validate({ ???debug:true});或者
$.validator.setDefaults({ ???debug: true})3.ignore：忽略某些元素不验证（默认情况是忽略:hidden及隐藏的元素不进行验证）
$.validator.setDefaults({ ???ignore: ".ignore"})4.errorPlacement：指定错误信息存放的位置
有一组复选框或单选框的情况，将错误信息的位置，存放在一组元素最后，如下：
$("#registerForm").validate({ ???errorPlacement: function (error, element) { //指定错误信息位置 ???????if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) { //如果是radio或checkbox ???????????var eid = element.attr(‘name‘); //获取元素的name属性 ???????????error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面 ???????} else { ???????????error.insertAfter(element); ???????} ???}});原文：jquery.validate使用说明及注意事项:http://www.shouce123.com/archives/180.html
jquery-validator中js校验及标签校验的使用
原文地址：http://www.cnblogs.com/super-chao/p/7760499.html