jQuery插件jQuery Validation学习(三)——validator对象

获取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(); 

jQuery插件jQuery Validation学习(三)——validator对象_第1张图片

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

validator.element("#username"); 

jQuery插件jQuery Validation学习(三)——validator对象_第2张图片

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

validator.resetForm();

比如说表单中已经存在如下错误提示:
jQuery插件jQuery Validation学习(三)——validator对象_第3张图片
这是如果执行resetForm
在这里插入图片描述
那么错误信息将会被清除:
jQuery插件jQuery Validation学习(三)——validator对象_第4张图片

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

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

添加了上面的方法后:
jQuery插件jQuery Validation学习(三)——validator对象_第5张图片

那么表单将会提示动态加入的错误信息:
jQuery插件jQuery Validation学习(三)——validator对象_第6张图片

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

validator.numberOfInvalids() 

图中错误信息如下:
jQuery插件jQuery Validation学习(三)——validator对象_第7张图片那么显示的错误信息就有两条:
在这里插入图片描述
如果没有错误信息:
jQuery插件jQuery Validation学习(三)——validator对象_第8张图片
那么显示的就是0条:
在这里插入图片描述

你可能感兴趣的:(Jquery及其组件)