ウェブサイトの開発プロセス中に、ユーザーが入力した情報が当社の要件を満たしているかどうかを確認する必要がある場合があるため、ユーザーが送信したデータを確認します。検証はクライアント側で 1 回、サーバー側で 1 回の計 2 回実行されます。クライアント側の検証により、ユーザー エクスペリエンスが向上します。
jquery 検証プラグインは多数あり、基本的に同じ機能を実装しています。この記事では、jquery 検証プラグインの 1 つである jquery.validate
のみを紹介します。jquery.Validation は、クライアント フォームを検証でき、優れたスケーラビリティを備えた多くのカスタマイズ可能なプロパティとメソッドを提供する優れた jquery プラグインです。
1.jquery.validate プラグイン関数
顧客情報の検証と要件を満たさない情報のフィルタリングを簡単に実装
2.jquery.validate 公式アドレス
公式アドレス: http://jqueryvalidation.org/、プラグインの詳しい使用手順が記載されています
公式デモ: http://jquery.bassistance.de/validate/demo/
3. jquery.validate の使用方法
1. js を引用します
1 2 |
|
2.css スタイル、カスタマイズ可能。エラー スタイルを追加するか、公式デモでそのスタイルを使用します。
1 2 3 4 |
|
3.js コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
|
上記のコードは、プラグインによって提供されるプロパティとメソッドのみを使用します。検証方法をカスタマイズすることもできます。
など1 2 3 4 5 6 7 |
|
カスタム メソッドの使用も非常に簡単で、要素 ID: "checkUserName" だけです。
4. 使用される HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
|
検証方法のその他のアプリケーションについては、http://jqueryvalidation.org/
を参照してください。