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

原创 jQuery Validator compare 比较校验器

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

内容目录

jQuery Validator的compare比较校验器用于根据自定义的符合JS语法的表达式字符串进行校验。

compare校验器的功能极其强大,熟练掌握并灵活使用compare校验器,能够快速实现许多复杂的输入校验。

语法

jQuery Validator 1.0 新增

// 在校验规则对象中指定该属性
compare: expression

// 例如:
compare: "this < now && #age > 18"

参数

参数 描述
expression String类型符合JS语法的表达式字符串。

expression应是一个符合JS语法的表达式字符串,框架将其解析为对应的JS表达式,表达式的执行返回结果即为校验结果。如果返回结果为false,则表示校验不通过。

在表达式字符串中,你可以指定任意的字面值、全局变量和函数调用,只要它符合JS语法。

表达式字符串还支持占位符,框架在解析字符串时,会将其替换为对应的值。expression支持以下形式的占位符:

this

this表示当前校验元素的value值。

now

now表示当前时间。

#id

id可以是任意表单元素的id属性值,#id表示该元素的value值。

$name

name可以是任意表单元素的name属性值,$name表示该元素的value值。

假设表单元素"#a"应用了非空校验、数字格式校验和compare比较校验,如果compare校验器的expression中还引用了其他元素"#b"、"#c",一般而言,能够进行比较的多个表单元素,在输入上也有相同的非空和格式校验要求。compare校验器可以与特殊属性propagation一起使用,实现校验规则的传播。只要propagationtrue,为"#a"定义的校验规则,除了其中的compare校验器外,其他校验规则也会自动传播,按照表达式中出现的先后顺序,依次对"#b"、"#c"进行校验。详情请参见下面的示例。

如果校验规则指定了format格式化校验器,则输入值将会以格式化后的值参与比较。例如:表单元素"#beginTime"应用了格式化校验器format: "date/datetime",则其输入值(假设为"2016-01-01 12:12:35")将以格式化后对应的Date对象来参与比较。如果设置了propagation: true,则其他元素的输入值也会转为Date对象来参与比较。

示例&说明

以如下HTML表单为例:

<form action="https://codeplayer.vip/">
	<div>
		<label>借款金额</label>:
		<input id="total" name="total" type="text" >
	</div>
	<div>
		<label>最小投标金额</label>:
		<input id="min" name="min" type="text" >
	</div>
	<div>
		<label>最大投标金额</label>:
		<input id="max" name="max" type="text" >
	</div>
	<div>
		<label>开始时间</label>:
		<input id="beginTime" name="beginTime" type="text" >
	</div>
	<div>
		<label>结束时间</label>:
		<input id="endTime" name="endTime" type="text" >
	</div>
	<input type="submit" value="提交" />
</form>

我们可以使用compare校验器来实现如下复杂的功能:运行代码

// 在表单提交时执行校验
$("form").v("submit", {
	"#total": {
		format: "number/money", // 必须是两位小数以内的数字
		range: "[100,]", // 100元起投
		// 最小投标金额不能大于最大投标金额,最大投标金额不能大于借款总额
		compare: "#min <= #max && #max <= this",
		propagation: true,
		message: {
			// 提示信息其实还不够友好
			compare: "{#min}不能大于{#max},{#max}不能大于{label}"
		}
	},

	"#beginTime": {
		required: false,
		format:"date/datetime", // "yyyy-MM-dd HH:mm:ss"格式
		// 开始时间可以为空,结束时间也可以为空
		// 但如果都不为空,则开始时间不能大于结束时间
		compare: "!this || !#endTime || this <= #endTime"
		propagation: true,
		message: {
			compare: "{label}不能大于{#endTime}"
		}
	}
});
  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论

打开导航菜单