CodePlayer

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

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

语法

jQuery Validator 1.0 新增。

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

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

参数

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一起使用，实现校验规则的传播。只要propagation为true，为"#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}"
		}
	}
});