在上篇文章给大家介绍了jQuery Validate初步体验(一) ，本文继续给大家分享jquery validate相关知识，对本文感兴趣的朋友快来学习吧。
刚刚试了所谓的新版的用法。千万别问我是多新，因为我也不知道。。。
<!DOCTYPE html> <html> <head> <script src="https://www.jb51.net/js/jquery.js"></script> <script src="https://www.jb51.net/js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate(); }); </script> </head> <body> <form method="get" action=""> <fieldset> <p> <label for="cusername">用户名</label> <input type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是{0}到{1}个字符"> </p> <p> <label for="cpassword">密码</label> <input type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="密码必须不少于{0}位"> </p> <p> <label for="cconfirmpassword">确认密码</label> <input type="password" data-rule-required="true" data-rule-equalTo="#cpassword" data-msg-required="请再次输入密码" data-msg-equalTo="两次输入的密码不一致"> </p> <p> <label for="cemail">邮箱</label> <input data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确"/> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
个人感觉这种用法比通过javascript自定义验证规则，要方便和简单多了。昨天在刚开始自定义的时候，总是无法正确的提示，当时完全不知道为什么。直到检查了多遍才发现，原来是因为我的rules里的键值对之间漏了一个逗号。所以，如果默认的校验规则已经满足你的验证需求，而你只是想改变一下提示语。那我个人建议你用这种新版的用法，当然也可以用 系列(一) 里的方法
二。具体看情况自己选择。
还有我上面的提示都是默认的黑色，身为提示，那样也太没存在感了。
为了增加存在感，你只需要在<head></head>之间插入下面的代码就可以了。
<style> #registerForm label.error{ margin-left: 10px; color:red; } </style>
请注意上面的#号后面跟着是表单的ID，你需要改成你自己相应的表单ID。我昨天尝试的时候，找到的资料里写的是#frm。当时我还以为#frm又是我没接触过的新用法呢，我还一直疑惑，为什么我的提示不显示成红色。基础差哎。。。
如果默认的验证规则已经不能满足你的需求，那么接下来，你就得自定义验证规则了。
比如，这里有一个需求，要你检查用户输入的邮编是否合法，这时你就得自定义验证规则了，使用的方法是jQuery.validator.addMethod()。
<!DOCTYPE html> <html> <head> <script src="https://www.jb51.net/js/jquery.js"></script> <script src="https://www.jb51.net/js/jquery.validate.js"></script> <script> $().ready(function() { jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); $("#registerForm").validate({ rules : { zipCode : { required : true,//对于required的提示语句没有进行任何的处理，他会使用默认的英文的提示。 isZipCode : true//isZipCode为自定义的验证规则 } }, messages : {//当你不写提示语句,他会使用上面方法返回的提示。 zipCode : { isZipCode : '请输入正确的邮编' } } }); }); </script> <style> #registerForm label.error { margin-left: 10px; color: red; } </style> </head> <body> <form method="get" action=""> <fieldset> <p> <label for="czipCode">中国邮编</label> <input /> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
当然，你也可以把这个验证规则提取出来存到一个JS文件里，然后在要用的地方引入JS文件。
jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); <!DOCTYPE html> <html> <head> <script src="https://www.jb51.net/js/jquery.js"></script> <script src="https://www.jb51.net/js/jquery.validate.js"></script> <script src="https://www.jb51.net/js/validate.expand.js"></script> <script> $().ready(function() { $("#registerForm").validate({ rules : { zipCode : { required : true,//对于required的提示语句没有进行任何的处理，他会使用默认的英文的提示。 isZipCode : true//isZipCode为自定义的验证规则 } }, messages : {//当你不写提示语句,他会使用方法返回的提示。 zipCode : { isZipCode : '请输入正确的邮编' } } }); }); </script> <style> #registerForm label.error { margin-left: 10px; color: red; } </style> </head> <body> <form method="get" action=""> <fieldset> <p> <label for="czipCode">中国邮编</label> <input /> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
接下来，就要好好说说jQuery.validator.addMethod() 这个方法，这个方法一共有三个参数。
第一个参数 ：“isZipCode” 是定义方法名，必须保证方法名唯一。
第二个参数：是一个回调（callback）函数。
这个回调函数有三个参数：
第一个：value ，是当前被验证的元素的值。
第二个：element，是当前被验证的元素。