10 jQueryフォーム検証プラグイン

キーテイクアウト

• HTML5は、ブラウザーベースのフォーム検証に新しいフォーム属性を導入しましたが、エラーメッセージとスタイルをカスタマイズできないなど、入力フィールドのパターンを作成する必要性などの制限があります。 jQueryフォーム検証プラグインは、これらの制限を克服することを目指しています
この記事には、Parsley、JQuery Form Validator、JQuery Validation Plugin、Bootstrap Validator、Smoke、Forvalidation、ValidAtr、Validetta、jquery.ivitidity、およびH5Validateなど、人気のあるJqueryフォーム検証プラグインのリストが記載されています。各プラグインには、カスタム検証ルール、ローカリゼーション、リモートAJAX検証、入力提案など、独自の機能と機能があります。
• jQueryフォーム検証プラグインは、事前定義されたルールに対してフォームフィールドに入力されたデータをチェックすることにより動作します。エラーに関する即時のフィードバックを提供し、フォームを送信する前にユーザーが修正できるようにします。ほとんどのプラグインはエラーメッセージのカスタマイズを許可し、一般にJavaScriptとjQueryをサポートするすべての最新のブラウザと互換性があります。
この人気のある記事は、2016年8月8日に更新され、現在のフォーム検証プラグインを反映しています。古い記事に関するコメントは削除されました。
• HTML5は、ブラウザがフォームをネイティブに検証できるように、新しいフォーム属性を導入しました。 CSS3とJavaScriptを使用すると、この記事で説明されているように、プラグインを必要とせずに基本的なフォーム検証を実現できます。しかし、これにはいくつかの制限があります：

エラーメッセージはブラウザ自体に残されています。入力フィールドのタイトルのみを提供できます

エラーメッセージのスタイリングをカスタマイズできません
入力フィールドのパターンを自分で作成する必要があります
次の10 jQueryフォーム検証プラグインは、エラーメッセージとスタイリングをカスタマイズし、検証ルールの作成を簡素化するという目標を設定しました。

1。パセリ

ローカリゼーションやカスタム検証ルールなどの通常のオプションを提供する拡張可能なプラグインだけでなく、リモートAJAX検証も提供します。ドキュメントは清潔で読みやすく、プロジェクトは積極的に維持されています。検証ルールは、HTML5フォームまたはカスタムデータ属性を使用して制御できます。 codepenのSitePoint（@SitePoint）によるペンParsleyプラグインデモを参照してください。

ウェブサイト ソースコード

2。 jquery form validator

モジュラープラグインは、デフォルトで基本的な一連の検証ルールを提供し、オンデマンドでさらにモジュールを読み込むことができます。たとえば、ファイルをアップロードするときのファイルバリーターだけでなく、日付、セキュリティ、またはロケーションモジュールもアップロードします。また、入力提案を提供することもできます。検証は、HTML5データ属性を使用して制御されます

CodepenのSitePoint（@SitePoint）によるペンjQueryフォームバリデータープラグインデモを参照してください。

ウェブサイト ソースコード

3。 jQuery検証プラグイン

2006年の最初の検証プラグインの1つ。HTML5属性またはJavaScriptオブジェクトを使用してカスタム検証ルールを指定できます。また、多くのデフォルトのルールが実装されており、自分でルールを簡単に作成するためのAPIを提供します。プラグインに関する詳細な情報を見つけることは最初は困難であり、jquery 1.xに限定されていますが、彼らはそれをより良くすることを約束しました - このキャンペーンを見てください。

CodepenのSitePoint（@SitePoint）によるPEN JQUERY VALIDATIONプラグインデモを参照してください。

ウェブサイト ソースコード

4。 Bootstrap Validator

ブートストラップ用のjQuery検証プラグイン。基本的には、HTML5属性を使用したネイティブフォームの検証に関するラッパーにすぎませんが、カスタムルールを追加するためにも使用できます。ブラウザからのエラーメッセージが常に表示され、自動的に正しい言語に変換されます。 ウェブサイト ソースコード

5。煙

Smokeは、フォームバリデーターを含むブートストラップ用のコンポーネントのコレクションです。他のBootstrap Validator（＃4）と比較して、ネイティブブラウザー検証は使用しません。したがって、エラーメッセージは自動的にローカライズされておらず、HTML5およびデータ属性、およびJavaScriptを使用して検証ルールを指定する必要があります。 CodepenのSitePoint（@SitePoint）によるペンスモークフォーム検証プラグインデモを参照してください。

ウェブサイト ソースコード

6。 formalidation

Bootstrap、Foundationなどの組み込み統合を備えた50ドルからのプレミアムJQuery Validationプラグイン。膨大な量の検証ルールとオプションがあり、多くの複雑なフォームを持つアプリケーションには利益をもたらす可能性があります。

ウェブサイト

7。 validatr

HTML5フォーム属性で制御されたネイティブエラーメッセージを使用するブラウザによるフォーム検証の非常に基本的なラッパー。ポリフィルとして、またはエラーメッセージスタイリングをカスタマイズするために使用できます。それ以上のこと、それ以下は何もありません。

ウェブサイト ソースコード

8。 validetta

このプラグインは、オプションが非常に限られているデータ属性を使用して検証を提供します。基本的な検証ルールだけが付属しており、他のすべてはカスタムの正規表現で追加できますが、それを実証する例はありません。他のプラグインと比較して、唯一のユニークな機能は、エラーメッセージがバブルに表示されることです（以下のデモを参照）。 ウェブサイト ソースコード

9。 jQuery.Alidity

JavaScriptのみを使用して検証を制御するためのプラグイン - HTML5またはデータ属性はありません。これは動的検証ルールに役立つ場合がありますが、プラグインはライティングを効率的にするのに十分なオプションを提供していません。電子メールのような新しいHTML5タイプの属性を使用することも許可されておらず、成功メッセージを表示するためにフォームが有効であるかどうかを確認する関数を提供しません。 ウェブサイト ソースコード

10。 h5validate

このプラグインは、残念ながらその作成者（Eric Elliott）によって放棄されています。その結果、デモ/ドキュメンテーションのWebサイトは404を返し、20個のオープンな問題があります。プラグインはタイプごとに入力を自動的に検証せず、次の例ではエラーメッセージが表示されません。エリックがプロジェクトの新しいメンテナーを探しているので、私たちはそれをリストに含めました。そのため、将来のある時点で、それがそれに息を吹き込む可能性があります。 ソースコード

結論

まあ、それは人気のあるjQueryフォーム検証プラグインのトップ10リストです。これらの経験がある場合（良いか悪いか！）、または他のフォーム検証プラグインを言及する価値があることがわかっている場合は、コメントでお知らせください！

jQueryフォーム検証プラグインに関するよくある質問（FAQ）

jQueryフォーム検証プラグインとは何ですか？

jQueryフォーム検証プラグインは、Webページのフォームフィールドに入力されたデータの検証に役立つツールです。ユーザーが入力したデータが、サーバーに送信される前に、ユーザーが入力したデータが正しく、必要な形式であることを保証します。これらのプラグインは、高速で、小さく、機能が豊富なJavaScriptライブラリであるjQueryを使用して構築されています。フォームフィールドを検証する簡単で効率的な方法を提供し、必要な手動コーディングの量を減らします。

jQueryフォーム検証プラグインはどのように機能しますか？

jQueryフォーム検証プラグインは、特定の事前定義されたルールに対してフォームフィールドに入力されたデータをチェックして動作します。これらのルールには、必要なフィールドのチェック、有効な電子メールアドレス、一致するパスワード、入力の最小および最大の長さなどが含まれます。入力されたデータがこれらのルールを満たしていない場合、プラグインはエラーメッセージを表示し、エラーが修正されるまでフォームが送信されるのを防ぎます。 jQueryフォーム検証プラグインを使用すると、フォーム検証のプロセスを大幅に簡素化できます。彼らは、各フォームフィールドを個別に検証するために複雑なJavaScriptコードを作成する必要がないことを救います。また、さまざまなブラウザやデバイスでフォーム検証を処理するための一貫した方法を提供します。さらに、エラーに関する即時フィードバックを提供し、ユーザーがフォームを送信する前に修正できるようにすることでユーザーエクスペリエンスを改善します。 jQueryフォーム検証プラグインでは、最初にjqueryライブラリをWebページに含める必要があります。次に、プラグインをダウンロードして、スクリプトタグを使用してWebページに含めることができます。一部のプラグインは、エラーメッセージをスタイリングするために追加のCSSファイルを含める必要がある場合があります。エラーメッセージをカスタマイズできます。メッセージのテキスト、表示されるスタイル、さらにはそれらが書かれている言語を変更できます。これにより、エラーメッセージを特定のニーズとユーザーの言語と文化に合わせて調整できます。JQueryフォーム検証プラグインは、すべてのブラウザーと互換性がありますか？ JavaScriptとjQueryをサポートするすべての最新のブラウザと互換性があります。ただし、互換性のレベルは、異なるプラグインと同じプラグインの異なるバージョン間で異なる場合があります。さまざまなブラウザのプラグインをテストして、期待どおりに機能することを確認することをお勧めします。同じWebページで複数のjQueryフォーム検証プラグインを使用することができますが、通常は推奨されません。複数のプラグインを使用すると、競合が発生する可能性があり、Webページのロードと応答が遅くなる可能性があります。通常、すべてのニーズを満たし、それに固執する1つのプラグインを選択する方が良いです。プラグインの最新バージョンをダウンロードし、古いファイルを新しいファイルに置き換えます。一部のプラグインは、最新バージョンを自動的にダウンロードしてインストールする更新機能を提供する場合があります。

他のJavaScriptライブラリを使用してjQueryフォーム検証プラグインを使用できますか？

はい、jQueryフォーム検証プラグインは他のJavaScriptライブラリで使用できます。ただし、図書館間の競合を避けるために注意する必要があります。 jQueryは、$シンボルを使用する他のライブラリでjQueryを使用できるようにするnoconflict関数を提供します。フォーム検証プラグイン。これらには、AngularJやReactなどの他のJavaScriptフレームワークのネイティブHTML5フォームの検証、サーバー側の検証、および検証ライブラリが含まれます。ただし、jQueryフォーム検証プラグインは、使いやすさと幅広い機能のために、依然として人気のある選択肢です。

以上が10 jQueryフォーム検証プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。