jQuery Validate验证插件使用步骤教程
1、首先下载jquery-validation插件,然后解压,把需要的引入到项目中的几个文件拷贝出来



2、一般需要以下几个文件:jquery.min.js(因为这个插件是基于jquery的,所以首先要引入jquery库文件)jquery.validate.min.js(validate插件)messages_zh.js(中文信息文件,如果需要支持英文或其它语言,引入对应的资源文件)additional-methods.js(附加的验证方法,如自定义的验证方法,可以写入到这个文件中)将以上几个文件拷贝到项目的资源文件目录下()

3、将以上文件引入到页面中,这个是关键,不引入是看不到测试效果的。

4、完整的测试例子代码<鲐扼敲行!DOCTYPE html><html><head> <meta charset="utf幻腾寂埒-8"> <title>用户信息</title> <script src="../js/jquery-validation/jquery.min.js"></script> <script src="../js/jquery-validation/jquery.validate.min.js"></script> <script src="../js/jquery-validation/messages_zh.js"></script> <script src="../js/jquery-validation/additional-methods.js"></script> <script> $().ready(function() { $("#userInfoForm").validate({ rules: { username: { required: true, minlength: 2 }, age: { required: true, digits:true }, password: { required: true, minlength: 6 }, confirm_password: { required: true, minlength: 6, equalTo: "#password" }, email: { required: true, email: true } }, messages: { username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" }, age: { required: "请输入年龄", digits: "必须输入整数" }, password: { required: "请输入密码", minlength: "密码长度不能小于6位" }, confirm_password: { required: "请输入密码", minlength: "密码长度不能小于6位", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱" } }); }); </script> <style> .error{ color:red; } </style></head><body><form id="userInfoForm" method="post" action=""> <fieldset> <legend>用户基本信息</legend> <p> <label for="username">用户名</label> <input id="username" name="username" type="text"> </p> <p> <label for="age">年龄</label> <input id="age" name="age" type="text"> </p> <p> <label for="password">密码</label> <input id="password" name="password" type="password"> </p> <p> <label for="confirm_password">验证密码</label> <input id="confirm_password" name="confirm_password" type="password"> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email"> </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset></form></body></html>

5、表单内容都不填,直接点击提交按钮,可以看到表单右侧出现红色的提示信息,提示请输入内容

6、现在测试下输入错误内容的情况下,提示的内容信息。年龄限制必须是整数,密码必须是6位及以上,验证密码必须和上面的密码一致,邮箱必须是正确的格式

7、将以上测试的错误内容改成正确的值,可以看到验证全部通过。是不是可以感觉到使用validate插件之后,轻松的完成了表单的验证,默认的验证格式都提供好了,可以直接使用。验证的提示信息也可以根据自己的需要自定义,配置非常灵活
