JQuery フォーム検証プラグイン EasyValidator の使用法分析_jquery

WBOY
リリース: 2016-05-16 16:31:14
オリジナル
2409 人が閲覧しました

この記事の例では、JQuery フォーム検証プラグイン EasyValidator の使用法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

このプラグインの目的は次のとおりです。ユーザーは JS 検証コードを 1 行記述する必要がなく、対応する検証属性を検証対象のフォームに追加するだけで済み、検証機能の保守が容易になり、スケーラブルになります。 、さらに使いやすくなりました。

デモには、一般的に使用される正規表現がすでに含まれており、スケーラビリティを考慮して、さまざまなユーザーの特別なニーズに応じて独自の正規表現を作成できます。

EasyValidator によって実装される関数:

1. プロンプト機能 (フォームまたはその他のタグにtip="プロンプトを表示するテキスト"を追加します)

例:

コードをコピー コードは次のとおりです:

または

コードをコピー コードは次のとおりです:

2. 通常のフォーム検証 (フォームに reg="正規表現" を追加)
例:

コードをコピー コードは次のとおりです:

通常のフォーム検証デモ: http://easyvalidator.googlecode.com/svn/trunk/index.html

3. AJAX フォーム検証 (url="検証システム アドレス" をフォームに追加します)
例:

コードをコピー コードは次のとおりです:

AJAX 検証デモ: オンライン デモはありません。ajax_demo.html をローカルで実行して、リモートの PHP ファイルを要求してください。もちろん、ユーザーが参照できるように、プログラム内にいくつかの既存のデータを事前に設定しています。

4. 通常のフォーム検証 AJAX フォーム検証 (通常の検証を通過した後、AJAX 検証を実行します)
例:

コードをコピー コードは次のとおりです:

5. 拡張機能フォームの検証 (一部の特別なビジネスニーズ):

これらの特別なニーズはビジネスに基づいています:

1. チェックボックスの選択ボックスの数を確認します。たとえば、他のユーザーが少なくとも 1 つのチェックボックス、最大 5 つのチェックボックスを選択できるように制限します。
2. 複数のフォームを比較します。たとえば、登録などに使用する場合は、[開始時間フォーム] が [終了時間フォーム] 以下である必要があります。または、2 つのパスワード形式が等しい必要があります。

この状況の特殊性により、ユーザーは独自のビジネス ロジック コードを記述する必要があり、公式は extendsValidate 拡張関数を提供しており、その中に独自のロジック コードを記述するだけです。

拡張関数フォーム検証デモ: http://easyvalidator.googlecode.com/svn/trunk/extends_demo.html

バグ修正ログ:
2010-9-24: 同じページ上の複数の FORM 送信のバグ、TIP の配置ミスのバグを修正
2010-9-26: IE6 で TIP をマスクできない問題を修正する bgiframe プラグインを追加
2010-9-27: 拡張 API を追加し、コア ライブラリを再構築

2011-1-1 : フォーム検証の TIP を分離し、TIP、URL、REG を別個のコンポーネントとして存在させ、より柔軟になりました。

2011-1-28: AJAX TIP エラー修正バグを修正し、ロジックを修正し、AJAX リクエストのリモート プログラム validate_user.php のエンコーディングを GB2312 に設定しました。

公式ダウンロード アドレス: http://code.google.com/p/easyvalidator/downloads/list

または、ここをクリックしてこのサイトからダウンロードしてください。 http://www.jb51.net/jiaoben/32303.html

オンライン正規表現バリデータ: http://regexpal.com/

この記事が皆さんの Web プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート