jQuery Validate(5) - Validator对象及常用静态方法

参考文档:

官方文档:https://jqueryvalidation.org/documentation/

菜鸟教程:http://www.runoob.com/jquery/jquery-plugin-validate.html


一、Validator对象

validate( [options] )返回一个Validator对象,有一些公共方法可以用来程序中触发校验以及改变表单内容。Validator有很多方法,只简单介绍以下这几个。

1.form()

表单校验结果,返回类型Boolean;该方法类似于$('#formId').valid()

示例:

var validator = $('#formId').validate({ ... });
validator.form(); // true | false

2.element( Selector )

单个元素校验结果,返回类型Boolean,该方法也类似于$('#username').valid()

var validator = $('#formId).validate( {...} );
validator.element($('#username')); // true | false


3.resetForm()

重置表单校验结果

var validator = $('#formId').validate( {...} );
validator.resetForm();


4.showErrors(errors)

设置元素提示信息,参数:Object,一个或多个 name:信息 键值对

示例:

validator.showErrors({
	'username': '用户名错误'
});


5.numberOfInvalids()

未通过校验元素个数

示例:

var validator = $('#formId').validate({
	...
	// 提交表单时,若有元素未通过,则输出
	invalidHandler: function() {
		console.log(validator.numberOfInvalids() + " 个元素未通过校验");
	}
	...
});

6.destroy()

销毁validator实例,此时无法再执行校验操作


二、常用的静态方法

1.$.validator.addMethod()

自定义校验规则,建议在 additional-methods.js 文件中添加(也可在jquery.validate.js中添加)  

参数说明:

addMethod(name, method, message)

  • name:规则名称
  • method(value, element, param):value:输入的值,element:校验的标签,param:规则内容
  • message:提示信息

示例:

// 扩展验证(邮政编码)  
$("#formId").validate({  
    rules: {  
        postcode: {  
            postcode: true  
        }  
    },  
    messages: {  
        postcode: {  
            postcode: '邮编格式不正确'  
        }  
    }  
    ...  
});  
  
// 建议在additional-method.js中添加  
$.validator.addMethod("postcode", function(value, element, param) {  
    var tel = /^[0-9]{6}$/;  
    return this.optional(element) || (tel.test(value));   
}, "请正确填写您的邮政编码");


2.$.validator.format()

格式化输出

参数说明:

format(template, arg0, ..., argN)

  • template:模板,可以使用{n}占位,n从0开始
  • arg0,..,argN:0或多个参数,代替模板中的${n}
示例1:
// {0}会被minlength: 4的4替代
$('#formId').validate({
	rules: {
		pwd: {
			required: true,
			minlength: 4
		}
	},
	messages: {
		pwd: {
			required: "密码不能为空",
			minlength: $.validator.format("密码至少{0}位!")
		},
	},
	...
})

示例2:
// 校验模板,若所有校验的错误信息格式一致,则可以使用以下方法
var template = $.validator.format("{0} 非有效值");
// 结果:abc非有效值
alert(template("abc"));

3.$.validator.setDefaults(options)

默认配置,options配置参数与validate(options)方法类似,对当前页面所有表单有效。常用于设置debug模式,错误元素放置位置errorPlacement等

示例:

// 为所有表单校验设置debug
$.validator.setDefaults({
	debug: true
});

4.$.validator.addClassRules()

添加组合规则,用户将常用的规则组合在一起

  • addClassRules(name, rules):单个组合规则,name:规则名称,rules:组合规则
  • addClassRules(rules):多个组合规则

示例:

// 单个组合规则,规则名称:username
$.validator.addClassRules('username', {
	required: true,
	minlength: 4
});
// 多个组合规则
$.validator.addClassRules({
	username: {
    		required: true,
    		minlength: 4
	},
	pwd: {
    		required: true,
    		maxlength: 6
	}
});



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值