学习总结：jQuery插件——Validation Plugin

本周的任务计划是学习并使用一款jQuery插件，所以在慕课网上找到了这个关于客户端表单验证的插件。

插件简介：Validation插件是最常用的插件之一，客户端表单验证是现代网站经常采用的方式，可以减少服务器的压力，缩短用户等待时间和提升用户体验。jQuery Validation插件提供了很多的配置项目，还附带了很多验证方法及多语言提示。

附上插件链接：http://jqueryvalidation.org/
额，演示源码可以去慕课网上下载http://www.imooc.com/learn/385

调用jQuery插件方法：（一般在HTML代码中的最后部分加入）

两个重要概念：
method：验证方法，指的是校验的逻辑。
rule：验证规则，指的是元素和验证方法的关联。

Validation Plugin基本API：
validate()为核心方法，定义了基本的校验规则和一些有用的配置项。
以下为基本验证方法
1.require 必填 ；remote 远程校验
2.minlength/maxlength 最小/最大长度；rangelength 长度范围
3.min 最小值； max 最大值； range 值范围
4.email Email格式；urlURL格式；date 日期 ；dateISO 国际标准日期
5.number 数字；digits 整数；equalTo 与另一个元素之相等

下面是设置校验规则的部分代码，其中设置了必填、输入格式、输入值的范围、最小长度、最大长度和远程校验等属性，如需实现其他属性的校验可以下载源码进行试验。

$("#demoform").validate({
debug:true,
rules:{
   username:{
   required:true,
   email:true,
   minlength:2,
   maxlength:10,/*可以将最小最大长度属性改为rangelength:[2,10]*/
   remote:"remote.jsp"//在调试界面控制台显示
   }，
   password:{
   required:true,
   min:1，
   max:9，
   minlength:2,
   maxlength:16,
   }
}
...

Validation Plugin高级API：
1.valid()方法 检查表单是否有效
例：点击按钮在控制台显示输入是否正确

$("#check").click(
     function(){
     console.log($"#demoForm").valid()?"填写正确":"填写不正确");
     });
     /*check为元素，demoForm为表单元素*/

2.rules() 获取表单元素的校验规则（也可以添加或删除表单元素的校验规则）
例：

$("#username").rules("add",{minlength:2,maxlength:10})
/*给名为username这个表单元素添加最小最大长度的校验规则*/
$("#username").rules("remove","minlength maxlength")
/*移除最大最小长度的校验规则*/

3.Validator对象
Validator有很多有用的方法：
Validator.form()检查表单是否有效，返回true或false
Validator.element(element)验证某个元素是否有效，返回true或false
Validator.resetForm()吧表单恢复到验证前原来的状态
Validator.showErrors(errors)针对某个元素显示特定的错误信息
Validator.numberOfInvalids()返回无效的元素数量

上述方法可以在控制台直接调用进行验证，所以就不给出详细代码，需要注意的是，调用前需要捕获validator对象。

var validtor = $("#demoForm").validate({
...

Validator静态方法（可以直接使用）:
jQuery.validator.addMethod(name,method [,message]
增加自定义的验证方法
其中
name:方法名称；
method:function（value，element，params） 方法逻辑；
message：提示消息；
additional-methods.js 包含了很多扩展验证方法

jQuery.validator.format(template,argument,argumentN…)
格式化字符串，用参数代替模板中的{n}

jQuery.validator.setDefaults(options) 修改插件默认设置

jQuery.validator.addClassRules（name，rules）
为某些包含名为name的class增加组合验证类型

validate()方法配置项
submitHandler 通过验证后运行的函数，可以加上表单提交的方法
invalidHandler 无效表单提交后运行的函数
ignore 对某些元素不进行验证
rules 定义校验规则
messages 定义提示信息
groups 对一组元素的验证，用一个错误提示，用errorPlacement控制吧出错信息放在哪里

这里部分介绍配置项的代码及效果

...
messages:{
       username:{
       required:'请输入用户名',
       minlength:'用户名不能小于两个字符',
       maxlength:'用户名不能超过10个字符',
       remote:'用户名不存在'
                    },
        password:{
        required:'请输入密码',
        minlength:'密码不能小于两个字符',
        maxlength:'密码不能超十六个字符'
                    },
...

效果显示如图

最后是几条客户端校验安全性

1. 在数据被输入程序前必须对数据合法性的检验。非法输入问题是最常见得Web应用程序安全漏洞
2. 所有提交的表单数据，都必须验证两次，即就提交前在客户端验证，提交后子服务器端再次验证，保证数据的合法性
3. 服务器端不要相信任何的客户端数据

最后的最后做一下自我的总结吧，因为是慕课网上学习的，所以说学的比较浅（但是有些东西还是没有好好理解），老师教的实例也很简单，所以说学完后并没又能够自己在下面练练手，在学习过程中也听到了一些以前没有听过的专业术语（前面没学扎实。。。）像正则表达式之类的还需要自己继续去了解，也有一部分的时间关系吧，把网上课程过一遍花了三个多小时，写博客时又简单的回顾了一遍，感觉收获的没投入的多。效率要提高，嗯，就这样吧。