Parsley.js を使用したフォームの検証

このチュートリアルでは、主にフォームの検証に使用される JavaScript ライブラリである Parsley.js の使用方法を説明します。 Parsley は、非常に巧妙かつシンプルな方法でフォームを検証するのに役立ち、広く使用されているフォーム検証ライブラリの 1 つです。

Parsley.jsの機能

Parsley が JavaScript フォームの検証に適している理由はたくさんあります。そのうちのいくつかを以下に挙げます。

• 直感的な DOM API - DOM API を使用すると、HTML マークアップで平易な英語を使用でき、残りの作業は Parsley が行います。単純なフォーム検証の場合でも、JavaScript を 1 行も記述する必要はありません。

• 動的フォーム検証 - Parsley を使用すると、フォームの変更を簡単に検出し、それに応じて検証を調整できます。

• 多数のバリデーター - Parsley には多数の組み込みバリデーターが存在します。必要に応じて、Ajax バリデーターを使用することもできます。

• 高い信頼性 - バグがなく、厳密にテストされています。

• ユーザー エクスペリエンス重視 - Parsley は UI と UX に特化しており、ニーズに合わせて Parsley のデフォルトの動作のほぼすべてをオーバーライドすることもできます。

パセリ検証フォームの使用方法

Parsley.js についてある程度理解できたので、次は Parsley を使用した例に焦点を当てます。次の「index.html」ファイルについて考えてみましょう。このファイルには、単純な JavaScript コードが埋め込まれたフォームがあります。 ＃＃＃＃＃＃例＃＃＃

index.html

リーリー 上部にある [編集して実行] ボタンをクリックしてこのコードを実行し、出力フォームを確認します。

イラスト

このコードには、異なる値を必要とする複数のテキスト領域を持つフォームがあります。各値には、テキスト キーワード、チェックボックス、またはオプションがあります。

さらに、コードの最後には「確認」ボタンがあります。フォームに何も入力せずにボタンをクリックすると、Parsley からポップアップ エラーが表示されます。また、入力したフィールドの一部が期待と一致しない場合は、Parsley.js から検証エラーが表示されます。

ここでこのコードを実行し、選択したテスト目的に基づいてさまざまなフィールドに入力できます。

＃＃＃結論は＃＃＃

このチュートリアルでは、簡単な例を使用して、Parsley.js を使用して JavaScript でフォームを検証する方法を示します。

以上がParsley.js を使用したフォームの検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。