1

2 つ以上のテキスト フィールドがあり、それらに同じプロパティを適用して、同じコードを 2 回以上記述しないようにしたい

これは機能しません:

$("#form").validate({  
    rules:  
    {
    'name', 'surname':{  
        required: true,  
        minlength: 3,
        maxlength: 50   
        }
    }
});

何か案は？

4

5 に答える 5

1

私の以前の答えから取る：

この例では、これがベースの開始コードです。

HTML :

<input type="text" name="field_1" />
<input type="text" name="field_2" />
<input type="text" name="field_3" />

jQuery :

$('#myForm').validate({
    rules: {
        field_1: {
            required: true,
            number: true
        },
        field_2: {
            required: true,
            number: true
        },
        field_3: {
            required: true,
            number: true
        }
    }
});

デモ: http://jsfiddle.net/rq5ra/

オプション 1a) 必要な共通ルールに基づいてフィールドにクラスを割り当て、それらのルールをクラスに割り当てることができます。カスタム メッセージを割り当てることもできます。

HTML:

<input type="text" name="field_1" class="num" />
<input type="text" name="field_2" class="num" />
<input type="text" name="field_3" class="num" />

.rules('add')メソッド は呼び出し後に呼び出す必要があり、..validate().each()class

jQuery:

$('#myForm').validate({
    // your other plugin options
});

$('.num').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: {
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

デモ: http://jsfiddle.net/rq5ra/1/

オプション 1b) 上記と同じですが、を使用する代わりにclass、name 属性の共通部分に一致します。

$('[name*="field"]').each(function() {
    $(this).rules('add', {
        required: true,
        number: true,
        messages: { // optional custom messages
            required:  "your custom message",
            number:  "your custom message"
        }
    });
});

デモ: http://jsfiddle.net/rq5ra/6/

オプション 2a) ルールのグループを引き出して、それらを共通の変数に組み合わせることができます。

var ruleSet1 = {
        required: true,
        number: true
    };

$('#myForm').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

デモ: http://jsfiddle.net/rq5ra/4/

オプション 2b)上記の 2a に関連しますが、複雑さのレベルに応じて、特定のグループに共通するルールを分離し.extend()、無限の方法でそれらを再結合するために使用できます。

var ruleSet_default = {
        required: true,
        number: true
    };

var ruleSet1 = {
        max: 99
    };
$.extend(ruleSet1, ruleSet_default); // combines defaults into set 1

var ruleSet2 = {
        min: 3
    };
$.extend(ruleSet2, ruleSet_default); // combines defaults into set 2

var ruleSet3 = { };
$.extend(ruleSet3, ruleSet1, ruleSet2); // combines sets 2 & 1 into set 3.  Defaults are included since they were already combined into sets 1 & 2 previously.

$('#myForm').validate({
    rules: {
        field_1: ruleSet2,
        field_2: ruleSet_default,
        field_3: ruleSet1,
        field_4: ruleSet3
    }
});

最終結果：

  • field_13以上の必須数になります。
  • field_2必要な数だけになります。
  • field_3は 99 以下の必要な数になります。
  • field_43 から 99 までの必須の数字になります。

デモ: http://jsfiddle.net/rq5ra/5/

于 2013-02-27T15:37:48.640 に答える
1

このように試してください

var ruleSet1 = {
        required: true,  
        minlength: 3,
        maxlength: 50
    };

$('#form').validate({
    rules: {
        field_1: ruleSet1,
        field_2: ruleSet1,
        field_3: ruleSet1
    }
});

または、次のように1つずつ実行します。

$("#form").validate({  
    rules:  
    {
    name: { required: true },
    surname:{  
        required: true,  
        minlength: 3,
        maxlength: 50   
        }
    }
});
于 2013-02-27T11:41:04.073 に答える
1

CSS クラスをすべてのフィールドに適用する

$(".cssClassName").rules("add", {
        required: true,  
         minlength: 3,
          maxlength: 50 ,
        messages:
   {required:"error1",minlength:"error2",maxlength:"error3"}});
于 2013-02-27T11:28:38.987 に答える
1

プロパティを変数として定義し、それを使用します。

var name_reqs = {  
     required: true,  
    minlength: 3,
    maxlength: 50   
};

$("#form").validate({  
    rules: {
           'name': name_reqs,
        'surname': name_reqs
    }
});
于 2013-02-27T11:28:52.917 に答える
1

明らかにこれを行うにはいくつかの方法がありますが、クラス ルールを使用する場合は次のようになります。

$.validator.addClassRules("name", {
  required: true,  
  minlength: 3,
  maxlength: 50
});

次に、次のようにルールを設定できます

$("#form").validate({  
    rules:  
    {
     firstname : name, 
     surname : name
    }
});

またはクラス名を使用してルールを設定します。

<input id="firstname" name="firstname" class="name">
<input id="surname" name="surnname" class="name">

この方法については、jQuery 検証の一般的なガイドラインのリファクタリング ルールのセクションで説明されています。

于 2013-02-27T12:02:42.447 に答える