如何验证最大字段是否大于最小字段？

Question

我在表单中有几组最小和最大字段,用户可以通过填写最小值和最大值来指定范围.我正在使用jQuery的Validate插件进行表单验证.我想设置一个验证规则,强制最大字段大于最小值.每当更改max 或 min字段值时,都会调用此方法.

我知道我可以设置某种基本的自定义验证方法,如下所示:

$.validator.addMethod("greaterThan",
    function(value, max, min){
        return parseInt(value) > parseInt($(min).val());
    }, "Max must be greater than min"
);

然后为max元素添加规则:

rules: {
    maxTruck: {greaterThan: '#minTruck'}
}

但它有点复杂,因为这仅适用于最大字段更改而不是最小字段.有没有简单的方法可以做到这一点,而无需编写lessThan方法并将其应用于min字段？

然后我想解决的另一件事 - 是否有任何简单的方法我可以一般地应用它而不必枚举每个最大字段以及它映射到的最小值？所以我可以有一个min和max类并调用类似的东西:

$(".max").rules('add', { greaterThan: ".min" });

并以某种方式设置方法,以便能够弄清楚(可能基于共享属性？)最大字段与最小字段配对？

更新:

我在这篇文章中提到的基本逻辑可以在这个jsfiddle中看到.但是,我还没有真正开展过这么多工作 - 我正在寻找基本上按照我描述的方式链接最小和最大字段集的逻辑.而且我不知道这是否是最好的方法 - 正如我所提到的,我希望能够一直这样做,这样我就不必通过id来引用最小和最大字段.

Answer 1

好的,这里应该有用.该规则基于内置equalTo方法:

$.validator.addMethod("greaterThan", function (value, element, param) {
    var $min = $(param);

    if (this.settings.onfocusout) {
        $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () {
            $(element).valid();
        });
    }

    return parseInt(value) > parseInt($min.val());
}, "Max must be greater than min");

示例: http ://jsfiddle.net/tUPQc/2/

要使规则更通用,您将不得不使用addClassRules:

$.validator.addMethod("greaterThan", function (value, element, param) {
    var $element = $(element)
        , $min;

    if (typeof(param) === "string") {
        $min = $(param);
    } else {
        $min = $("#" + $element.data("min"));
    }

    if (this.settings.onfocusout) {
        $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () {
            $element.valid();
        });
    }
    return parseInt(value) > parseInt($min.val());
}, "Max must be greater than min");

$.validator.addClassRules({
    greaterThan: {
        greaterThan: true
    }
});

然后在你的HTML中:

<input id="maxTruck" name="maxTruck" type="text" class="number greaterThan" data-min="minTruck" />

示例: http ://jsfiddle.net/tUPQc/3/