jQuery插件－－Validation

「爱情、让人受尽委屈。」 2022-06-09 09:16 302阅读 0赞

###  ###

### jQuery插件 ###

一：插件的选择标准  
1.插件作者  
2.插件的社区活跃度  
3.插件的更新频率

### 二：jQuery validation插件最常用的表单验证插件之一 http://jqueryvalidation.org ###

jQuery表单验证插件：https;//plugins.jquery.com/tag/validate/  
4.阅读查看源码  
jquery Validation插件  
1:让客户端表单验证变得非常容易，并且提供了很多的配置项目  
2：插件还附带了很多验证方法，并实现了国际化，可以配置多语言的提示信息。

### Validation插件 ###

label的for属性规定label与哪个表单元素绑定，当用户点击label时与其绑定的表单元素会获取焦点。  
ready事件()：当DOM(文档对象模型)已经加载,并且页面(包括图像)已经完全呈现时，会触发。  
用法如图：   
rules：定义表单验证的规则  
message：用于定义表单验证提示信息  
rules和message中使用的都是元素的name属性值，而不是id属性值，rules和message中的验证方法需要一致，这样当某一个验证方法不通过，才能做出对应的提示  
比如：rules中使用required:true，则message中使用required:用户名必填，这样当用户名没有填写时则会提示“用户名必填

### 在js中调用   `$(id).validate({ rules:{ username:{ required : true, // 必填 minLength: 2 //最小长度为2 maxLength:10 // 最大长度为10 } }， message:{ username:{ required:"此项不能为空"，//若没填显示提示信息 minLength: "最小长度为2"， maxLength: "最大长度为10" } } })` ###

### 两个重要概念、validate方法 ###

method：验证方法，指校验的逻辑。比如Email方法，检查输入的文本十分符合Email的规则。  
rule:验证规则，指元素和验证方法的关联。比如页面一个id味Email的文本框，需要带有Email的验证方法。  
validate是插件的核心方法，定义了基本的校验规则和一些有用的配置项。例如，debug，如果这个参数为true,那么表单不会提交，只进行检查，调试是十分方便的。

## 基本验证方法 ##

required           必填                 　 remote          远程校验  
    minlength        最小长度            　maxlength     最大长度                     rangelength   　长度范围  
    min                  最小值              　  max               最大值                        range  　　　　值范围  
    Email               email格式   　　　url                  URL格式                    date                  日期                     dateISO      ISO日期  
    number           数字                      digits              整数                            equalTo           与另一个元素值相等   
 remote：远程校验，用于通过访问服务器来校验数据的有效性  
如校验用户名是否存在  
remote用法：  
1、remote使用get请求访问服务器  
访问服务器后返回校验结果：正常的时候返回true，检验不通过的时候返回错误提示信息  
remote:url  
2、remote使用post请求访问服务器  
remote:\{  
              url:请求地址  
              type：请求类型post/get  
       data:\{  
             需要传递的参数  
             \}  
    \}  
  
  
rangelength长度范围：是以数组的方式呈现，如:rangelength:\[2,10\]  == minlength:2, maxlength:10  
min和minlength的区别：min 是表示数字，如，min:2 最小的数字为2.；minlength 是表示长度。  
同样，max 和maxlength ，range 和rangelength 都是前者表示数字，后者表示长度。

### validation插件的基本验证方法之三： ###

9、email：Email格式校验  
10、url：url格式校验，需要带“http://”或“https://”等前缀  
11、date：日期校验，使用的是js的date类型，只要能被Date.parse识别的都是有效的  
12、dateISO：ISO日期校验，格式必须为yyyy/MM/dd或yyyy-MM-dd的  
PS：以上验证方法的值都是boolean类型，true表示进行验证

## 高级API ##

### valid()方法 ###

$("demoForm").valid()?"填写正确":"填写错误" // valid方法返回true或者false，判断填写正确与否

### rules()方法 ###

$("\#username").rules() // 返回username的所有方法，只能针对一个属性，不能针对例如demoForm  
$("\#username").rules("add",\{min:2,max:10\}) // 为username增加规则  
$("\#username").rules("remove","min max") // 为username删除规则，只需要填写规则名字

### Validator对象 ###

validator.form()                        //整个表单是否有效  true/false  
validator.element("username")           //验证元素有无校  
validator.resetForm()                   //表单恢复到验证前状态  
validator.showErrors(\{\})                //针对某个元素显示特定的错误信息  
validator.numberOfInvalids()            //返回无效元素数量   
 控制台演示：

### validator对象静态方法 ###

$.validator.addMethod(name,method\[,message\])增加自定义的验证方法  
$.validator.format(template,argument,argumentN...)格式化字符串，用参数代替模板中的\{n\}  
$.validator.setDefaults(options)修改插件默认设置  
$.validator.addClassRules(name,rules)为包含class属性名批量增加验证类型(下图为实例，给classname为“txt”的元素添加验证类型)   
 控制台演示：

### ![Center][]    ###

### validate方法配置项(1) ###

submitHandler通过验证后运行的函数，可以加上表单提交方法  
invalidHandler无效表单提交后运行的函数  
ignore对某些元素不进行验证  
rules定义校验规则  
messages定义提示信息  
groups对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在那实例调用：

#### 1 submitHandler:function() ####

### submitHandler:function(from)\{         //表单提交的方式         from:submit();//$(form).Ajax.submit();//$ajax等方式提交表单     \}    ###

####  2  invalidHandler:function() ####

###    invalidHandler:function(event,validator)\{ //event:无效验证触发的事件 //validator:对象     \}也可以写一个事件来触发       $("选择器属性值").on("事件名",function(event,validator))\{   \})    ###

#### 3  ignore ####

### ignore:"\#hidden" 对隐藏元素不进行校验    ###

#### 4       rules中的校验方法都可以定义depends属性，表示当条件满足时返回true，则执行校验方法 ####

针对参数为boolean类型的校验方法：  
         required:\{  
                 //只有depends:function(element)返回true，required校验方法才起作用  
                 depends:function(element)\{  
                //:filled是Validation自带的选择器，匹配填写内容的元素  
                return $("\#password").is(":filled")  
        \}  
  \}  
针对参数为非boolean类型的校验方法如下：  
maxlength:\{  
param:2  
//只有depends:function(element)返回true，maxlength校验方法的值才设置为2  
depends:function(element)\{  
//:filled是Validation自带的选择器，匹配填写内容的元素  
return $("\#password").is(":filled")  
\}  
\}  
\}

#### 5      groups的使用如下： ####

groups:\{login:"username password confirm-password"\} //对一组元素进行验证  
          errorPlacement:function(error,element)\{ //对一组元素验证后错误信息显示  
          error.insertBefore("\#info");//将一组元素的错误信息都显示在id="info"的元素上

### validate方法配置项(2) ###

onsubmit是否在提交时验证  
onfocusout是否在获取焦点时验证  
onkeyup是否在敲击键盘时验证  
onclick是否在鼠标点击时验证，一般用于checkbox或者radio  
focusInvalid提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获  
得焦点  
focusCleanup当未通过验证的元素获得焦点时，是否移除错误提示  
errorClass指定错误提示的css类名，默认为error,可以自定义错误提示的样式，当然类名也可以自定义设置  
validClass指定验证通过的css类名 道理同上  
errorElement使用什么标签标记错误 （如用<li>标记）  
wrapper使用什么标签把上边的errorElement包起来 （如用<ul>包裹）  
errorLabelContainer把错误信息统一防在一个容器里面  （如放在类或id选择器中）  
errorContainer显示或者隐藏验证信息，可以自动实现由错误信息出现时把容器属性变为显示，无错误时隐藏（一般同时使用和上面3个或上面3个同时使用）

### validate()方法配置项(3) ###

1、showErrors：可以显示总共有多少个未通过验证的元素  
如：showErrors:function(errorMap,errorList)\{  
errorMap：元素信息和错误信息的键值对  
errorList：元素信息、错误信息、验证方法等信息列表  
this.defaultShowErrors();//使用默认的错误提示信息展示方式，需要这个否则错误信息不显示了  
\}  
2、errorPlacement：自定义错误信息放在哪里，配合groups一起使用  
3、success：要验证的元素通过验证后的动作  
如：success:"right" 或 success:function(label)\{label.addClass("right")\}  
效果是给错误信息展示label元素的class属性值追加right值  
4、highlight：可以给未通过验证的元素加效果  
如：highlight:function(element,errorClass,validClass)\{  
//element：绑定验证的元素  
//errorClass：验证错误信息展示label的class属性值  
//validClass：验证通过信息展示label的class属性值  
\}  
5、unhighlight：去除未通过验证的元素的效果，一般和highlight同时使用，同上  
  
  
注意：success主要针对label元素，highlight主要针对input元素  
     highlight和unhighlight主要用在单项验证时

### 选择器扩展 ###

validate插件自带3个选择器扩展  
  blank选择所要值为空的元素（半角的空格都为blank）  
  filled选择所要值不为空的元素  
  unchecked选择所要没有被选中的元素（一般用于复选框）  
自定义验证方法  
$.validator.addMethod(name,.method\[,message\])  
name:方法名称  
method:function(value,element,params)方法逻辑  
message:提示消息  
this.optional(element)意思填写值了才会验证，加上这个之后最好设置require，否则这个验证不会被执行   
  
  
 additional-methods.js包含了很多扩展验证方法。在写自定义方法时可以参考这个js库  
客户端校验安全

### ![Center 1][]    ###

[Center]: /images/20220609/15a81669e0a54e63b31db499d39979ee.png
[Center 1]: /images/20220609/412314faf6054beca55a02523a68ac0a.png