10

フォームに最小フィールドと最大フィールドのセットがいくつかあり、ユーザーは最小フィールドと最大フィールドを入力して範囲を指定できます。フォームの検証に jQuery の Validate プラグインを使用しています。最大フィールドが最小フィールドよりも大きいことを強制する検証ルールを設定したいと考えています。これは、最大フィールド値または最小フィールド値が変更されるたびに呼び出されます。

次のような基本的なカスタム検証方法を設定できることはわかっています。

$.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 フィールドに適用することなく、これを行う簡単な方法はありますか?

そして、私が取り組みたいもう1つのこと-各最大フィールドとそれがどの最小フィールドにマップするかを列挙する代わりに、これを一般的に適用できる簡単な方法はありますか? そのため、最小クラスと最大クラスを用意して、次のように呼び出すことができます。

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

そして、どうにかして、最大フィールドがどの最小値とペアになっているかを（おそらく共有属性に基づいて）把握できるようにメソッドを設定しますか？

アップデート：

この投稿で言及した基本的なロジックは、この jsfiddleで確認できます。ただし、私はこれほど多くの作業を行っていません。基本的に、説明した方法で最小フィールドと最大フィールドのセットをリンクするロジックを探しています。そして、これがこれを行うための最良の方法であるかどうかはわかりません-前述したように、id で最小フィールドと最大フィールドを参照する必要がないように、これを一般的に実行できるようにしたいと考えています。

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'
        },

2 番目に優先する 

$.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 に答える