HTML5 のカスタム検証メッセージを使用してフォームの必須属性を作成する

HTML5 には多くの組み込みフォーム検証機能が含まれており、開発者はフォームに検証を簡単に追加できます。これらの機能の 1 つは「required」属性です。これは、入力フィールドが必須であり、フォームを送信する前に入力する必要があることを指定します。

「必須」属性はブール属性です。フォーム内に「必須」属性を持つ入力フィールドがある場合は、フォームを送信する前にこのフィールドに入力する必要があります。

フォームを送信する前にこの特定のフィールドを空白のままにすると、この入力フィールドが必須であることを通知するエラー メッセージがブラウザに表示されます。

「必須」属性を使用します

「必須」属性を使用するには、必須にしたい入力フィールドに属性を追加するだけです -

リーリー

ブラウザは、フォームを送信する前に入力フィールドが入力されているかどうかを確認し、入力されていない場合はエラー メッセージを表示します。ブラウザによっては、デフォルトのエラー メッセージが異なる場合がありますが、通常はフィールドが必須であることが示されます。

カスタム確認メッセージ

フィールドが無効な場合にユーザーに送信される固有のメッセージを指定することで、無効な入力のメッセージを変更することもできます。 「title」属性 -

を使用して、デフォルトの検証メッセージを変更できます。 リーリー

このコードは、フォームの送信時に入力フィールドが空白のままの場合、ユーザーに「名前を入力してください」というメッセージを表示します。

フォームに記入するたびに入力が一致する必要がある正規表現を指定するために、HTML5 には「title」属性に加えて「pattern」要素が用意されており、プログラマーは入力が一致する必要がある正規表現を指定できます。受け付けます。 。入力が必要なパターンと一致しない場合、ユーザーにはブラウザにエラー通知が表示されます。

Example

これは、「パターン」属性を使用して入力フィールドの最小長を指定する方法の例です -

リーリー

この条件を満たさない入力をした場合、「3文字以上入力してください」というメッセージが表示されます。このコードでは、入力フィールドに少なくとも 3 文字を含める必要があります。

カスタムエラーメッセージスタイル

CSS を使用すると、エラー メッセージの外観を変更できます。デフォルトでは、エラー メッセージは小さなテキスト ノードとして入力フィールドに追加され、赤いフォントで書き込まれます。ただし、CSS を使用してエラー メッセージの外観を変更し、表示方法を制御することができます。

「:invalid」疑似クラスは、入力フィールドが無効な場合にそれを選択するために使用でき、CSS プロパティを使用してエラー メッセージのスタイルを変更できます。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

以下は、CSS を使用してエラー メッセージのスタイルをカスタマイズする方法の例です -

リーリー

入力フィールドが無効な場合、このコードは境界線を赤に変え、エラー メッセージを赤の太字で表示します。

JavaScript を使用したエラー メッセージのカスタマイズ

CSS の使用に加えて、JavaScript を使用してエラー メッセージをカスタマイズし、その表示方法を制御することもできます。

JavaScript を使用してエラー メッセージをカスタマイズするには、「setCustomValidity」メソッドを使用します。これにより、入力フィールドにカスタム エラー メッセージを指定できます。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

以下は、「setCustomValidity」メソッドを使用してカスタム エラー メッセージを設定する方法の例です -

リーリー

このコードは、入力フィールドのエラー メッセージを「有効な値を入力してください」に設定します。

＃＃＃結論は＃＃＃

この記事では、パーソナライズされた確認メッセージと HTML5 の「必要」要素を組み合わせる方法について説明しました。フォーム検証の基本、「needed」タグ、JavaScript と CSS を活用して検証メッセージをパーソナライズする方法について説明しました。

開発者は、HTML5 フォームにフォーム検証をすばやく追加し、「needed」要素を利用して検証メッセージをカスタマイズすることで、ユーザーが必要な情報を提供していることを確認できます。フォーム検証はユーザー入力の正確さと完全性を保証する重要なツールであるため、多くの Web アプリケーションはフォーム検証に依存しています。

以上がHTML5 のカスタム検証メッセージを使用してフォームの必須属性を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。