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

WBOY
リリース: 2023-08-31 08:21:06
転載
1400 人が閲覧しました

使用 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 サイトの他の関連記事を参照してください。

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