0

フォームを検証するためにjQuery検証プラグインを使用しています。私が見ているように（ドキュメントから物事を理解するのに苦労しています）、組み込みの検証ルールを適用する方法の2つの基本的な選択肢があります。

  1. HTMLでクラスを適用します

    <input name="myNum" id="myNum" type="text" class="number" />

  2. validateメソッドを呼び出すときに入力IDでルールを指定します

    $('#sales').validate({
    rules: {
        myNum: {number: true}
    }
});

「ベストプラクティス」と見なされるのはどれですか？すべてのルールをvalidateメソッドの1つの場所にコーディングする方が明確で、すべての検証を1つの集中管理された場所で確認できるようにするのか、それともHTMLで単純なルールを次のようにコーディングするのが理にかなっているのかを判断しようとしています。クラスを作成し、カスタマイズされた検証のみをvalidateメソッドに配置します。検証をコーディングするためのより受け入れられている方法は何ですか？どの方法を使用する場合、何を決定する必要がありますか？

4

2 に答える 2

4

個人的な選択以外に考慮する必要がある唯一の要因は、ルールとして適用するメソッドが追加のパラメーターを受け取るメソッドである場合、メソッド名をクラス名として使用できないことです。たとえば、これらのメソッド

  • 最小長、
  • maxlength
  • rangelength
  • 分
  • 最大
  • 範囲
  • に等しい

すべてパラメータを取ります-つまり、それらの定義は

function(value, element, param)

それよりも

function(value, element)

したがって、このマークアップは機能しません

<!-- doesn't work --> 
<input name="email2" class="minlength"/>

追加のパラメータをとらないメソッドは、「必須」、「電子メール」、「URL」、「日付」などです。

したがって、独自のカスタムメソッドであっても、署名関数（値、要素）があれば、クラス名でフォームフィールドに適用できます。

ドキュメントは完全に最新ではありません。ドキュメントにまったく記載されていないデータ属性など、マークアップの入力フィールドにメソッドを適用する方法は複数あります。たとえば、これらはすべて有効です。

<input name="email1" required />
<input name="email2" class="required"/>
<input name="email3" type="required"/>
<input name="email4" data-rule-required="true" />
<input name="email5" data-rule-required="true" data-rule-minlength="5" />
<input name="email6" data-rule-required="true" data-rule-range="[1,5]"/>

nb。データスタイルの場合、プラグインの最新バージョンが必要です

于 2013-01-17T13:42:24.023 に答える
0

組み込みrules()メソッドを使用してルールを追加できます。 ドキュメントを参照してください。

これは、両方の方法の最良のようです。ですべてのルールを定義することを回避し.validate()ながら、ルールのカスタム セットを無制限に柔軟に定義できます。class次に、これらのルールの「セット」をカスタム、 name、idなどで割り当てることができます。

注:を呼び出した後にこのメソッドを呼び出す必要があり、..validate().each()

このメソッドは、フォームにフィールドを動的に追加する場合にも非常に役立ちます。

(形式は、定義済みのカスタム メッセージとは、 内にルールを追加する場合とは少し異なることに注意してください.validate())

jsFiddle デモ

HTML:

 <input type="text" class="myclass" name="field1" />
 <input type="text" class="myclass" name="field2" />
 <input type="text" class="myclass" name="field3" />

jQuery:

$('form').validate({
    // your other options
});

// the following method must come AFTER .validate()
$('form').find('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true,
        range: [1,5],
        messages: {
            required: "Required input",
            digits: "Only digits please",
            range: "Please only enter between {0} and {1}"
        }
    });
});

nameまたは、代わりにフィールドでターゲティングすることもできますclass...

jsFiddle デモ

HTML:

 <input type="text" class="myclass" name="field1" />
 <input type="text" class="myclass" name="field2" />
 <input type="text" class="myclass" name="field3" />

jQuery:

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

// the following method must come AFTER .validate()
$("input[name^='field']").each(function() {
    $(this).rules('add', {
        required: true,
        digits: true
    });
});
于 2013-01-17T16:45:24.990 に答える