jQueryプロンプトの入力エラー

Web サイトのデザインでは、フォームは一般的な要素の 1 つです。フォームユーザーが送信する必要がある情報を入力すると、Web サイトはフォーム検証を通じてデータの有効性をチェックします。フォームでは、ユーザー エクスペリエンスを向上させるために、ヒントやフィードバックを提供するために jQuery プラグインがよく使用されます。その中で一般的なプラグインは入力エラー プロンプトです。

入力エラー プロンプトにより、ユーザーはフォームを送信する前にどのデータが不正であるかを知ることができるため、時間を節約し、エラーを減らすことができます。以下は、入力エラー プロンプトを実装する方法を示す例です。

まず、簡単な HTML フォームを作成します。フォームには、名前、電子メール、パスワードの 3 つのフィールドが含まれています。

 
 姓名  
 
 电子邮件  
 
 密码  
 提交 

次に、jQuery プラグインを使用して入力エラーを表示します。 jQuery の validate プラグインを使用すると、フォーム フィールド (必須フィールドや電子メール形式など) のルールに基づいて、ユーザーがフォームを送信する前にフォームを動的にチェックできます。フィールドがルールに準拠していない場合は、入力エラーが表示されます。この関数を実装する例を次に示します。

$(document).ready(function(){ $("#signup-form").validate({ rules: { name: { required: true }, email: { required: true, email: true }, password: { required: true, minlength: 6 } }, messages: { name: { required: "姓名不能为空" }, email: { required: "电子邮件不能为空", email: "电子邮件格式不正确" }, password: { required: "密码不能为空", minlength: "密码至少需要6个字符" } }, errorElement: "div", errorPlacement: function(error, element) { error.addClass("invalid-feedback"); element.closest(".form-group").append(error); }, highlight: function(element, errorClass, validClass) { $(element).addClass("is-invalid").removeClass("is-valid"); }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass("is-invalid").addClass("is-valid"); } }); });

上記の例では、ページが$(document).ready()を通じてロードされるときに検証プラグインが使用されます。方法。rulesオブジェクトはルールを指定し、messagesオブジェクトはエラー メッセージを指定します。エラー メッセージでは、特殊文字「$」記号を使用してフォーム フィールドの名前を参照できます。

errorElementオプションは、div要素を使用してエラー メッセージを表示します。errorPlacementオプションは、入力フィールドに関連付けられたform-groupクラスにエラー メッセージを挿入します。highlightオプションとunhighlightオプションは、入力ボックスがフォーカスされているときとフォーカスが外れているときにそれぞれトリガーされます。これら 2 つのメソッドは、境界線の色を赤と緑に設定して、エラー フィールドを強調表示します。

最後に、検証プラグインは、ユーザーがフォームを送信したときに検証を実行します。フィールドがルールに準拠していない場合は、エラー メッセージが表示されます。これらのメッセージは、送信ボタンの下に対応するフィールドごとに表示されます。

上記は入力エラー プロンプトの例です。 jQuery とこのプラグインを使用すると、デザイナーがフォームの基本的な検証を実装し、フォームを送信する前にどのデータが不正であるかをユーザーに理解させることができます。

以上がjQueryプロンプトの入力エラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。