jQuery插件jQuery Validation学习（三）——validator对象

我不是女神ヾ 2021-06-26 16:06 499阅读 0赞

获取`validator`对象的方法如下（在之前的表单校验函数中，其实就返回这个对象，所以直接接收这个值即可）：

//获得validator对象
            		validator = $("#demoForm").validate({ 
            			//调试模式，也就是说按下提交按钮的时候并不会提交
            			debug:true,
            			//rules的键是表达中的name属性而不是id 
            			rules: { 
            				username: { 
            					//需要填
            					required:true,
            					
            					
            				},
            				password: { 
            					required:true,
            					minlength:2,
            					maxlength:16,
            					
            				},
            				"confirm-password": { 
            					equalTo:"#password"
            				}
            			},
            			//rules规则相应的提示信息
            			messages: { 
            				username: { 
            					required:"请填写用户名",
            					minlength:"用户名最小为2位",
            					maxlength:"最大最大为10位",
            					remote:"用户名不存在",
            					rangelength:"用户名的范围不对"
            				},
            				password: { 
            					required:"请填写用户名",
            					minlength:"密码最小为2位",
            					maxlength:"最大最大为10位",
            				},
            				"confirm-password": { 
            					equalTo:"两次输入密码不一致"
            				}
            			}
            		});

那么这个对象可以实现如下功能：

### 1.验证表单是否有效,返回`true/false` ###

validator.form();

![在这里插入图片描述][20190814231741974.png]

### 2.验证表单中某一个元素是否有效 ###

validator.element("#username");

![在这里插入图片描述][20190814231836946.png]

### 3.清除请求所有的验证错误信息 ###

validator.resetForm();

比如说表单中已经存在如下错误提示：  
![在这里插入图片描述][20190814231900950.png]  
这是如果执行`resetForm`：  
![在这里插入图片描述][20190814231920675.png]  
那么错误信息将会被清除：  
![在这里插入图片描述][20190814231932972.png]

### 4.动态向表单中的某一元素显示错误信息 ###

validator.showErrors({ 
        	username:"error info!!!"
        })

添加了上面的方法后：  
![在这里插入图片描述][2019081423201766.png]

那么表单将会提示动态加入的错误信息：  
![在这里插入图片描述][20190814232032208.png]

### 5.获取表单中填写错误数据的数量 ###

validator.numberOfInvalids()

图中错误信息如下：  
![在这里插入图片描述][2019081423210770.png]那么显示的错误信息就有两条：  
![在这里插入图片描述][2019081423212687.png]  
如果没有错误信息：  
![在这里插入图片描述][20190814232136965.png]  
那么显示的就是0条：  
![在这里插入图片描述][20190814232200776.png]

[20190814231741974.png]: /images/20210626/9a7743ad3ff04025b08824ddd4e6f024.png
[20190814231836946.png]: /images/20210626/d159350ec5104ee4b5c1449ce7f28f32.png
[20190814231900950.png]: /images/20210626/b07e67e8b8b94af783b1c648bcce6c17.png
[20190814231920675.png]: /images/20210626/404554276fa4482e86c5bd2889853cfe.png
[20190814231932972.png]: /images/20210626/7dbabd9a772c4c188ab338fab3abe318.png
[2019081423201766.png]: /images/20210626/4ac3230ccca24bdfa283ca98e9d2435e.png
[20190814232032208.png]: /images/20210626/46b92c4764824acd89ab48e57e749fb4.png
[2019081423210770.png]: /images/20210626/42081fcb054d44eab328d9b58fb23f41.png
[2019081423212687.png]: /images/20210626/62fec8e7e2f14f72ab670e2be9afd117.png
[20190814232136965.png]: /images/20210626/d34a5bed6de24380a887498887c55285.png
[20190814232200776.png]: /images/20210626/1e539cb90e1343feb7ab68b649d4717d.png