jqueryの検証入力ボックスは赤にならないはずです

Web 開発では、フォーム検証は非常に重要なリンクです。 jquery validate プラグインは、フォーム検証機能の実装に簡単に役立ちます。フォーム検証プロセス中に、入力が要件を満たさない場合、プラグインは入力ボックスの境界線を赤に変えて、入力が正しくないことをユーザーに通知します。ただし、場合によっては、入力ボックスを赤にせず、元の境界線の色を維持したい場合があります。

この記事では、jquery validate プラグインを使用して、入力ボックスを赤くせずにフォーム検証機能を実装する方法を紹介します。

1. jquery validate プラグインの概要

jquery validate は非常に人気のあるフォーム検証プラグインであり、非常に豊富な検証ルールと関連関数のセットを提供しており、これは私たちに役立ちますフォーム検証機能を迅速に実装します。具体的な使用法と関連手順については、プラグインのドキュメントを参照してください。

2. デフォルトのエラー プロンプトを無効にする

jquery validate プラグインでは、デフォルトのエラー プロンプト メソッドは、入力ボックスの境界線を赤に変更し、以下にエラー プロンプト情報を挿入することです。入力ボックス。このエラー プロンプトを無効にしたい場合は、プラグインの初期化時にいくつかのパラメーターを設定する必要があります。

具体的には、ハイライトおよびハイライト解除パラメータを設定して、デフォルトのエラー プロンプトを無効にする必要があります。ハイライトパラメータはエラー発生時の入力ボックスのスタイルを設定するために使用され、アンハイライトパラメータは通常に戻ったときの入力ボックスのスタイルを設定するために使用されます。これら 2 つのパラメータに空のコールバック関数を設定して、プラグインのデフォルト スタイルを無効にすることができます。

例:

$("form").validate({
  highlight: function(element) {
    // do nothing
  },
  unhighlight: function(element) {
    // do nothing
  }
});

上記の設定では、エラー発生時に入力ボックスが赤くなり、正常に戻っても入力ボックスは変化しません。

3. カスタマイズされたエラー プロンプト方法

デフォルトのエラー プロンプト方法は非常に便利ですが、場合によっては適用できない場合があります。この場合、jquery validate が提供するいくつかのコールバック関数を使用して、エラー プロンプト メソッドをカスタマイズできます。

具体的には、jquery validate は、エラー プロンプトをカスタマイズするための 2 つのコールバック関数、errorPlacement と showErrors を提供します。 errorPlacement 関数はエラー メッセージの位置を特定するために使用され、showErrors 関数はエラー メッセージを表示するために使用されます。

例:

$("form").validate({
  errorPlacement: function(error, element) {
    // 自定义错误提示信息位置
    error.appendTo(element.parent());
  },
  showErrors: function(errorMap, errorList) {
    // 自定义错误提示信息显示
    var error = errorList[0];
    var element = $(error.element);
    element.addClass("error");
    element.next(".error-message").text(error.message);
  }
});

上記の設定を通じて、エラー メッセージの位置とスタイルをカスタマイズして、特定の視覚効果を実現できます。

4. CSS スタイル コントロールを使用する

場合によっては、入力ボックスが赤にならないように CSS スタイルを設定できます。

例:

input.error {
  /* 输入框出错时的样式 */
  /* do something here */
}

input.valid {
  /* 输入框恢复正常时的样式 */
  /* do something here */
}

上記のスタイルを設定することで、入力ボックスが赤にならないように入力ボックスのスタイルを制御できます。

5. 概要

フォーム検証プロセス中に、入力ボックスが赤くなるのは、一般的なエラー プロンプトです。ただし、場合によっては、入力ボックスを赤にせず、元の境界線の色を維持したい場合があります。この記事では、デフォルトのエラー プロンプトの無効化、エラー プロンプトのカスタマイズ、CSS スタイル コントロールの使用など、入力ボックスが赤くなるのを防ぐいくつかのフォーム検証方法を紹介します。どの方法を選択するかは、実際のニーズと個人の好みによって異なります。

以上がjqueryの検証入力ボックスは赤にならないはずですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。