jQuery插件——Validation Plugin
jQuery插件——Validation Plugin 顾名思义，用于验证表单验证。某位大神编写，下载地址https;//plugins.jquery.com/tag/validate/
一、基本验证方法：
| required | 必填 |
| remote | 远程校验 |
| minlength | 最小长度 |
| maxlength | 最大长度 |
| rangelength | 长度范围 |
| min | 最小值 |
| max | 最大值 |
| range | 值范围 |
| Email格式 | |
| url | URL格式 |
| date | 日期 |
| dateISO | ISO日期 |
| number | 数字 |
| digits | 整数 |
| equalTo | 与另一个元素值相等 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录DEMO</title> <link href="css/style.css" rel="stylesheet"> <script src="js/jquery-1.10.0.js" type="text/javascript"></script> <script src="js/jquery.validate-1.13.1.js" type="text/javascript"></script> </head> <body> <form action="" id="loginForm" method="post"> <fieldset> <legend>用户登录</legend> <p id="info"></p> <p> <label for="username">用户名</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password"/> </p> <!--<p>--> <!--<label for="confirm-password">确认密码</label>--> <!--<input type="password" id="confirm-password" name="confirm-password"/>--> <!--</p>--> <p> <input type="submit" value="登录"/> </p> </fieldset> </form> <script type="text/javascript"> $(function () { $("#loginForm").validate({ rules: { username: { required: true, minlength: 2, maxlength: 10, // remote:"php/login.php" remote: { url: "php/login.php", type: "post", data: { loginTime: function () { return +new Date; } } } }, password: { required: true, minlength: 2, maxlength: 10 } }, messages: { username: { required: "请填写用户名", minlength: "请填写2位以上用户名", maxlength: "请填写10位以下用户名", remote: "用户名不符" }, password: { required: "请填写密码名", minlength: "请填写2位以上密码", maxlength: "请填写10位以下密码" } } }) }) </script> </body> </html>
1. min, minlength ...等区别
min是最小值，是数字。
minlength是长度，可以为字符。
2. data与dateISO
dateISO格式更严格，必须为2016/5/11或者2016-5-11
3. equalTo 一般用户重复输入密码
二、进阶验证方法：
1. valid()方法：检查表单是否有效。
2. rules(), rules("add", {min:10}), rules("remove", {max min required}) :获取规则，添加“min”规则，删除“max min required”规则。只能用于单个元素。
3. Validator对象，validate方法返回Validator对象
1）Validator.form()验证表单是否有效，返回true、false
2）Validator.element(element)验证某个元素是否有效，返回true、false
3）Validator.resetForm()把表单恢复到验证前的状态
4）Validator.showErrors(errors)针对某个元素显示特定的错误信息（一般用于显示自定义的错误信息）
5）Validator.numberOfInvalids()返回无效的元素数量
3. 国际化
$.extend($.validator.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}的数值") });
