jquery validate 前端校验插件

后端默认永远不信任前端的任何提交数据，所以后端永远是需要检查检验的。既然如此，为什么前端还如此执着校验，多此一举呢?前端校验的优点：

1. 减轻一部分服务器压力
2. 可以提升用户使用产品的幸福感（更友好）

引入两个JS文件

jquery.js 和 jquery.validate.js 由于jquery.validate.js 是在jquery.js的基础上开发的插件，所以有引入顺序，必须先引入jquery.js

jquery.validate.js 的内置校验规则

(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true 必须输入正确格式的电子邮件
(4)、url:true 必须输入正确格式的网址
(5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true 必须输入合法的数字(负数，小数)
(8)、digits:true 必须输入整数
(9)、creditcard:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(11)、accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10] 输入值必须介于 5 和 10 之间
(16)、max:5 输入值不能大于5
(17)、min:10 输入值不能小于10

自定义错误提示

由于 此款 validate 校验插件，是国外友人写的，所以，默认的错误提示是英文的。为了符合国情，可以选择使用汉化包，为了与自身网站的需求，需要自定义错误提示，参考方法如下:

$.extend($.validator.messages, {
  required: "此项必须填写",
  email: "你输入的邮箱格式有误"
})
````

## HTML中写校验规则，参考：

提交表单时验证

$().ready(function() {

$("from").validate();

});

## JS中写校验规则，参考：

let validateRules = {
rules:{

"username":{required:true},
"email":{required:true, eamil:true},
"pwd1":{required:true, maxlength:5},
"pwd2":{required:true, minlength:5, equalTo:"#password"}

},
messages:{

"username":{required:"必填项"},
"email":{required:"必填项", eamil:"邮箱格式不正确"},
"pwd1":{required:"密码不能为空", maxlength:"密码长度必须大于5位"},
"pwd2":{required:"必填项", minlength:"密码长度必须大于5位", equalTo:"两次输入的密码不一致"}

}
}

如果校验规则写到了JS中，提交时，将校验规则作为参数，传入validate(validateRules),参考如下：

$(function() {

$("from").validate(validateRules);

});

## 自定义校验规则
validate虽然内置了不少了校验规则，但是可能我们有自己个性化的需求，如，自定义一个校验手机号的规则：`checkphone`。这时候就需要自定义校验规则了，语法如下：

$.validator.addMethod("checkphone",function(value,element,params){
/ 业务代码 /
})

参数function(value,element,params){},的三个参数详解：
value 对应 用户输入值，即 <input /> 标签的输入值
element  对应 校验规则所在对象，即<input /> 元素对象