Articles

jQuery Validation Plugin

“しかし、jQueryはあなた自身の検証プラグインを書くのを簡単にしませんか?”
確かに、しかしの世話をする機微の多くはまだあります:あなたは(そのような電子メール、Url、クレジットカード番号など)検証方法の標準ライブラリが必 エラーメッセージをDOMに配置し、必要に応じてそれらを表示および非表示にする必要があります。 Keyupやblurなど、単なる送信イベント以上のものに反応したいと思っています。
異なるプロジェクトで使用しているサーバー側の環境に応じて、検証ルールを指定するには、さまざまな方法が必要な場合があります。 結局のところ、あなたは車輪を再発明したくないでしょうか?

“しかし、すでにそこに検証プラグインのトンはありませんか?”
そうですが、jQuery以外のソリューション(jQueryを見つけたので避けることができます)とjQueryベースのソリューションがたくさんあります。 この特定のものは、最も古いjQueryプラグイン(2006年7月に開始)の一つであり、世界中のプロジェクトで自分自身を証明しています。 このプラグインが検証ソリューションの法案にどのように適合するかを議論する記事もあります。確信していませんか?

この例を見てください:

10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
29
29
29
29
29
29
29
29

素敵で簡単ですか?

フォームを選択し、検証プラグインを適用するためのjQueryの単一行に加えて、検証ルールを指定するために、各要素にいくつかの注釈。もちろん、それがルールを指定する唯一の方法ではありません。 また、これらのデフォルトメッセージに依存する必要はありませんが、フォームの検証の設定を開始するときに便利です。

デモで遊んでいるときに外を見るためにいくつかのことをリンク

  • 無効なフォームを送信しようとした後、最初の無効な要素は、ユーザーがフィー 最初のフィールドではない別の無効なフィールドが送信前にフォーカスされていた場合、そのフィールドは代わりにフォーカスされ、ユーザーが希望する場合は最
  • フィールドが無効とマークされる前に、検証は遅延です:初めてフォームを送信する前に、ユーザーは迷惑なメッセージを取得することなく、フィールドをタブスルーすることができます–彼らは実際に正しい値を入力する機会を持つ前に盗聴されることはありません
  • フィールドが無効とマークされると、それは熱心に検証されます: ユーザーが必要な値を入力するとすぐに、エラーメッセージが削除されます
  • ユーザーがマークされていないフィールドに何かを入力し、そこからタブ/クリックすると(フィールドをぼかす)、検証されます-明らかにユーザーは何かを入力するつもりでしたが、正しい値を入力できませんでした

検証プラグインのデモをクリックすると、動作が刺激される可能性があります–これは、目立たないユーザーエクスペリエンスのために設計されており、不要なエラーメッセージでできるだけユーザーを迷惑にしません。 そのため、他のデモを試してみるときは、ユーザーの1人のように反応して、その動作が優れているかどうかを確認してください。 そうでない場合は、私はあなたが改善のために持っているかもしれない任意のアイデアにつ

リンクAPIドキュメント

おそらく、validate()メソッドの

リンクオプションを探しています

そうでな

ドキュメント全体では、二つの用語が非常に頻繁に使用されているので、検証プラグインのコンテキストでその意味を知っていることが重要です。

  • method: 検証メソッドは、テキスト入力の値の正しい形式をチェックする電子メールメソッドのように、要素を検証するロジックを実装します。 標準的な方法のセットが利用可能であり、あなた自身を書くのは簡単です。
  • ルール:検証ルールは、要素を”validate input with name”primary-mail”with method”required”および”email”のような検証メソッドに関連付けます。

リンクプラグインメソッド

このライブラリは、3つのjQueryプラグインメソッドを追加します。validateメソッド:

  • validate()–選択したフォームを検証します。
  • valid()–選択されたフォームまたは選択された要素が有効かどうかをチェックします。
  • rules()–要素のルールを読み取り、追加、削除します。このライブラリは、3つのカスタムセレクターでjQueryを拡張します。
    • :blank–空白の値を持つすべての要素を選択します。
      • :blank-空白の値を持つすべての要素を選択します。:blank:blank
      • :filled–塗りつぶされた値を持つすべての要素を選択します。
      • :unchecked–チェックされていないすべての要素を選択します。

      link Validator

      validateメソッドは、プログラムで検証をトリガーしたり、フォームの内容を変更したりするために使用できるいくつかのパブリックメソ Validatorオブジェクトにはより多くのメソッドがありますが、ここに記載されているメソッドのみが使用

      • Validator.form()–フォームを検証します。
      • Validator.element()–単一の要素を検証します。
      • Validator.resetForm()–制御されたフォームをリセットします。
      • Validator.showErrors()–指定されたメッセージを表示します。
      • Validator.numberOfInvalids()–無効なフィールドの数を返します。
      • Validator.destroy()–バリデータのこのインスタンスを破棄します。バリデーターオブジェクトにはいくつかの静的メソッドがあります。
        • jQuery.validator.addMethod()–カスタム検証メソッドを追加します。
        • jQuery.validator.format()–{n}プレースホルダを引数に置き換えます。
        • jQuery.validator.setDefaults()–検証のためのデフォルト設定を変更します。li>
        • jQuery.validator.addClassRules()–複合クラスメソッドを追加します。

        組み込み検証メソッドのリンクリスト

        標準検証メソッドのセットが提供されています。

        • required-要素が必要になります。
        • remote–要素の有効性をチェックするためのリソースを要求します。
        • minlength–要素に指定された最小長が必要になります。
        • maxlength–要素に指定された最大長が必要になります。
        • rangelength–要素に指定された値の範囲を必要とします。
        • min–要素に与えられた最小値を必要とします。
        • max–要素に与えられた最大値を必要とします。
        • range–要素に指定された値の範囲を必要とします。
        • step–要素に指定されたステップを必要とします。
        • email–要素に有効な電子メールを必要とします
        • url–要素に有効なurlを必要とします
        • date–要素に日付を必要とします。li>
        • dateISO–要素にISO日付を必要とします。
        • number–要素に10進数を必要とします。
        • digits–要素に数字のみを必要とします。
        • equalTo–要素が別の要素と同じである必要があります

        いくつかのメソッドはアドオンとして提供されており、現在追加メソッドに含ダウンロードパッケージのjs。 それらのすべてがここに文書化されているわけではありません。

        • accept–ファイルアップロードが指定されたmimeタイプのみを受け入れ
        • creditcard–要素にクレジットカード番号が必要になります。
        • extension–要素に特定のファイル拡張子を必要とします。
        • phoneUS–有効な米国の電話番号を検証します。
        • require_from_group–グループ内の特定の数のフィールドが完全であることを保証します。

        GitHubリポジトリには、すべての追加メソッドのソースコードを見つけることができます。

        $.validator.methodsプロパティ

        リンク一般的なガイドライン

        一般的なガイドラインのセクションでは、プラグインの背後にある これは、利用可能なさまざまな方法とオプションを簡単に説明したAPIドキュメントよりも詳細に機能をカバーしています。

        アプリケーションで検証プラグインを使用することを決定し、それをよりよく知りたい場合は、ガイドラインを読むことをお勧めします。

        複雑な名前(角かっこ、ドット)を持つフィールドをリンクします

        userのようなname属性がある場合は、名前を引用符で囲んでください。 詳細は一般的なガイドラインを参照してください。

        リンクが多すぎる再帰

        このコードでは別の一般的な問題が発生します:2

        3
        4
        5
        6
        7
        8
        $("#myform").validate({
        submitHandler: function(form) {
        }
        });

        これはあまりにも多くの再帰エラーになります。$(form).submit()別の検証ラウンドをトリガし、submithandlerほら、再帰。 それをフォームに置き換えます。submit()は、検証ではなく、ネイティブのsubmitイベントをトリガーします。

        正しいコードは少し違って見えます:

        1
        2
        3
        4
        5
        $("#myform").validate({
        submitHandler: function(form) {
        form.submit();
        }
        });

        marketoサインアップフォームをリンクします

        marketoサインアップフォームをリンクします,ステップ2

        marketo.com サインアップフォーム。 カスタム検証は一度このプラグインに置き換えられました。 それを貢献してくれたGlen Lipkaに感謝します!デモの注目すべき機能

        :

        • カスタマイズされたメッセージ表示:必要な方法ではメッセージが表示されず、入力エラー(間違った電子メール形式など)のみが表示されます。 それらは以下で強調表示されています。”)
        • 電子メールフィールドのリモート検証。 Egを入力してみてください。
        • マスク入力プラグインとの統合、ステップ2のZipと電話フィールドとクレジットカード番号を参照してください
        • “会社の住所と同じ”がチェックされているときにステップ2の請求先住所をオプションにするためのカスタムメソッド
        • パスワードをチェックするためのカスタムメソッド: パスワードに少なくとも一つの数字と一つの文字が含まれており、少なくとも6文字の長さであることを確認します。 ユーザーが無効な値でフィールドをぼかすと、入力は空になり、再びフォーカスが取得されます。

        リンクを覚えてミルクサインアップフォーム

        サインアップフォームからrememberthemilk.com (古いバージョンに基づいています)。 カスタム検証は、このプラグインを使用して置き換えられました。 貢献してくれたRTMに感謝します!デモの注目すべき機能

        :

        • カスタムメッセージ表示、有効なフィールドのチェックマークを表示するには、成功オプションを使用して、元のテーブルレイアウトに基づいて、
        • ユーザー名のリモート検証、それがすでに取られているかどうかを確認する(”Peter”、”asdf”または”George”を試してみてください)

        マルチパートをリンク”購入&家を売る”フォーム

        Michael Evangelistaによって貢献された。家を売買するためのmultipartフォーム。デモの注目すべき機能

        :

        • マルチパート、jQueryのUIアコーディオンと検証されたときに要素が現在のページ上にあるかどうかを確認するためのカスタムメソッドを使用して実装
        • マスク入力プラグインとの統合は、電話とZipフィールドを参照してください

        リンクsを支援するためにリモート検証を使用して

        sを記入するために、ユーザーを支援するためのリモート検証を備えています。

        デモの注目すべき機能:

        • リモート検証は、ユーザーが入力したかどうかを確認します。最初のフォームを提出するために彼を強制することなく、正しい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です