jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的。
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单。
但是在学习的过程中，我也遇到了疑惑，网上的很多例子貌似都是依赖jquery.metadata.js这个库，然后在标签里写成class=”required remote” 这样的形式，class本身是呈现样式的，现在被附上各种校验的规则，看上去有些乱。那如果不依赖jquery.metadata.js，又该怎么写。
1、只引入jquery.js(具体版本自己选择)和jquery.validate.js
<!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" required="true" rangelength="[2,10]"> </p> <p> <label for="cpassword">密码</label> <input type="password" required="true" minlength="6"> </p> <p> <label for="cconfirmpassword">确认密码</label> <input type="password" required="true" equalTo="#cpassword"> </p> <p> <label for="cemail">邮箱</label> <input required="true" email="true"> </input> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
事实证明，只引入上面的两个JS文件也能完成简单的表单验证。
2、不过由于默认的提示信息是英文的，为了能有一个友好的提示，所以，接下来要做的就是让提示信息显示成中文了。
方法一、通过javascript自定义提示信息。
<!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({ rules : { username : { required : true, rangelength:[2,10] }, password : { required : true, minlength:6 }, confirmpassword : { required : true, equalTo:"#cpassword" }, email : { required : true, email : true } }, messages : { username : { required : '请输入姓名', rangelength:'长度在 {0} 到 {1} 之间' }, password : { required : '请输入密码', minlength:'密码不能少于 {0}位' }, confirmpassword : { required : '请再次输入密码', equalTo:'两次输入的密码不一致' }, email : { required :'请输入邮箱', email : '请输入有效的电子邮件地址' } } }); }); </script> </head> <body> <form method="get" action=""> <fieldset> <p> <label for="cusername">用户名</label> <input type="text"/> </p> <p> <label for="cpassword">密码</label> <input type="password"/> </p> <p> <label for="cconfirmpassword">确认密码</label> <input type="password"/> </p> <p> <label for="cemail">邮箱</label> <input type="email"/> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form> </body> </html>
首先这里有一个方法调用： $("#registerForm").validate([options]) ，这是用来验证选择的表单，方法的参数是可选项，可以输入0个或者多个键值对(key/value)，这个方法是为了处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使用 rules 和 messages 定义验证的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的错误信息显示。其中rules里也可以输入0个或者多个键值对，他的key对应的是元素的name属性值，例如username，confirmpassword等等。而他的value里则是一些验证规则。messages同rules一样可以输入0个或者多个键值对，他的key也是对应的元素的name属性值，而他的value里则是验证错误的提示信息。简而言之，rules{}中定义验证规则的方法。 messages{}中定义错误输出。
上面有一点需要注意的就是 equalTo:"#cpassword"，这个键值对里的value是元素的ID值(如果注意到#号就应该能察觉到)。