10

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

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

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

然后为最大元素添加一条规则：

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

但这有点复杂，因为这只适用于更改最大字段时，而不是最小值。有什么简单的方法可以做到这一点，而不必编写 lessThan 方法并将其应用于 min 字段？

然后我想解决的另一件事-有什么简单的方法可以通用地应用它，而不必枚举每个最大字段以及它映射到哪个最小值？这样我就可以有一个最小和最大类并调用类似的东西：

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

并以某种方式设置方法以能够确定（可能基于共享属性？） max 字段与哪个最小值配对？

更新：

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

4

2 回答 2

13

好的，这是应该工作的东西。该规则基于内置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/

于 2013-01-16T00:46:21.743 回答
4

使用addmethod的简单好方法

$.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());
}, "Must be greater than to field 1");

验证码

filed2_name: {

            greaterThan: '#filed1_id'
        },

第二个我更喜欢第一个 

$.validator.addMethod('le', function(value, element, param) {
      return this.optional(element) || value <= $(param).val();
}, 'Invalid value');
$.validator.addMethod('ge', function(value, element, param) {
      return this.optional(element) || value >= $(param).val();
}, 'Invalid value');

$('form').validate({rules: {
            fieldName1: {le: '#fieldID2'},
            fieldName2: {ge: '#fieldID1'},
             ...
      },
      messages: {
            fieldName1: {le: 'Must be less than or equal to field 2'},
            fieldName2: {ge: 'Must be greater than or equal to field 1'},
            ...
      }
});
于 2014-01-30T12:00:32.960 回答