但实际上，validate插件只是将label标签添加了一个'success'类，且原先的'error'类并没有删除。且经过实际测试，'error'类名无法删除，删除之后，每次验证成功时，validate插件都会自动再生成一个label标签
所以，success的效果无法正常使用，这应该是validate插件的一个bug
<style> label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;} </style> <body> <form> <p> <label for="username">用户名：</label> <input type="text" /> </p> <p> <label for="email">电子邮件：</label> <input /> </p> <p> <label for="url">网址：</label> <input/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"请输入用户名", minlength:"至少输入{0}个字符", maxlength:"最多输入{0}个字符" }, email:{ required:"请输入邮箱", email:"邮箱格式不正确" }, url:{ required:"请输入网址", url:"网址格式不正确(完整的网址应包括或https://)" } } }) </script>
自定义验证
由于需求的需要，除提供的默认验证规则外，还需要自定义验证规则，满足业务需要。这时就需要使用addMethod()方法
【addMethod(】
addMethod(name,method,message)方法用来添加一个新的验证方法
参数 name 是添加的方法的名字。参数 method 是一个函数，接收三个参数 (value,element,param)。value 是元素的值，element 是元素本身，param 是参数
以验证手机号为例，手机号一般是11位，前3位是号段，后8位一般没有限制。而且，在手机开头很可能有0或+86
//开头 (0|\+86)? //前3位 13\d|14[579]|15[0-35-9]|17[0135-8]|18\d //后8位 \d{8} //手机号码 var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
$.validator.addMethod({ 'phone', function(value,element,param){ var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/; return value.test(reg); }, '请输入正确的手机号码' })
<style> label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');} </style> <form> <p> <label for="phone">手机号码：</label> <input type="text" /> </p> <p> <input type="button" value="提交"> </p> </form> <script> $.validator.addMethod( 'phone', function(value,element,param){ var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/; return reg.test(value); }, '请输入正确的手机号码' ); $('#demoForm').validate({ rules:{ phone:{ required: true, phone:true } }, messages:{ phone:{ required:"请输入手机号码" } } }) </script>
修改触发方式
下面的虽然是 boolean 型的，但建议除非要改为 false，否则别乱添加
触发方式 类型 描述 默认值 onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证 true onfocusout Boolean 失去焦点时验证（不包括复选框/单选按钮） true onkeyup Boolean 在 keyup 时验证。 true onclick Boolean 在点击复选框和单选按钮时验证 true focusInvalid Boolean 提交表单后，未通过验证的表单会获得焦点 true focusCleanup Boolean 如果是true，当未通过验证的元素获得焦点时，移除错误提示 false
远程校验
使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项
[注意]远程地址只能输出 "true" 或 "false"，不能有其他输出