您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2016年05月27日 06:52

原创 jQuery Validator define() 预定义校验规则

2163 次浏览 读完需要≈ 8 分钟

内容目录

jQuery Validator的define()方法用于预定义校验规则,以便于在后续的所有校验中,直接通过规则名称引用对应的校验规则定义。

语法

define()方法支持以下两种用法:

用法一:一次定义单个校验规则。

define(ruleName, rule, global)

用法二:一次性定义多个校验规则。

define(rules, global)

参数

参数 描述
ruleName String类型指定规则名称。
rule Object类型规则的具体定义对象。
rules Object类型以多个ruleName:rule的形式,同时定义多个规则。
global 可选/Boolean类型指示定义的规则是否为全局规则。如果是全局规则,则所有实例均可使用;否则只有当前实例可以使用。该值默认为false

参数rule是一个主要由一到多个校验器组成的规则对象,对象中的每个属性名称就是校验器的函数名称,对应的属性值即是该校验器所需的表达式参数。

v.define("ruleName", {
    validator1: expression1,
    validator2: expression2,
    // ...
    validatorN: expressionN
});

如果rule不是对象类型(Object),jQuery Validator会将其转为对象{ ruleName: rule },也就是将ruleName视作校验器的名称。例如:

v.define("required", true)
// 等价于
v.define("required", { "required": true })

v.define("format", "number")
// 等价于
v.define("format", { "format": "number" })

// 也就是说,如果规则只应用了一个校验器,且该校验器的名称与规则名称相同,就可以这样速写

在jQuery Validator中,所有的校验规则定义存储在两个地方:

  • V.fn.rules对象用于存放全局的校验规则定义,所有实例可用;
  • v.rules对象用于存放当前实例(即v)自身的校验规则定义,只有当前实例可用。(v.rules对象默认不存在,首次定义实例规则时才会创建)。

如果同时存在同名的实例校验规则和全局校验规则,jQuery Validator将优先引用实例校验规则。

作为jQuery Validator的原型方法,define()一般在实例上调用。不过考虑到预定义全局校验规则时,可能还没有创建任何实例,因此define()也支持直接在原型上直接调用,即:V.fn.define(),此时无论global参数是省略还是其他任意值,都会视其为true,并将校验规则定义到全局V.fn.rules上。

如果没有特殊需要,建议尽量将校验规则统一定义到全局上。

示例&说明

var v = new V(); // 创建一个jQuery Validator实例对象

// 为当前实例定义一个名为"hello"的校验规则
v.define("price", { 
	// 只要没有显式地指定required:false,则默认为 required:true,因此无需手动添加
	// required:true,
	format: "number",
	range: "[100,]"	
});

// 为当前实例定义一个名为"hello"的校验规则
v.define("test", {
	length: "[6,16]"
}, true);

// 一次性为当前实例定义多个校验规则
v.define({
	"beginTime": {
		"format": "date"
	},
	"required": true // 这里的true等价于 { required: true }
});

// 为全局(所有实例)定义一个校验规则
V.fn.define("idcard", {
	format: "idcard/?;[18,]"	
});

接下来,你就可以通过规则名称,直接引用上述规则定义了:

// 直接对单个值进行校验
var input = "12.50";
var result = v.validate(input, "price"); // 应用"price"规则进行校验

// 直接对单个表单元素进行校验
var $price = $("#price");
result = v.validate($price, "price"); // 应用"price"规则进行校验

// 直接对多个form表单元素进行校验
result = $("form").v({
	"#username": "required",
	"#idcard": "idcard",
	"#password": {
		length: "[6,20]" // 当然,你也可以直接动态指定规则对象
	}
});

// 指定在表单提交时进行校验
$("form").v("submit", {
	"#username": "required",
	"#idcard": "idcard"
});
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单