HTML インタラクティブフォーム検証-htmlチュートリアル-php.cn

HTML インタラクティブフォーム検証

巴扎黑

リリース： 2017-03-19 17:31:01

オリジナル

1155 人が閲覧しました

HTML でフォームを作成するのは常に少し複雑です。まず HTML マークアップを正しく記述する必要があります。次に、送信する前に各フォーム項目に使用可能な値があることを確認する必要があります。最後に、問題が発生した場合にユーザーに警告する必要があります。

幸いなことに、HTML5 には、このタスクをはるかに簡単にするいくつかの新機能が導入されています。特に、フォームコントロールは制約をサポートするように拡張され、ブラウザーが JavaScript を使用せずにクライアント側でフォームコンテンツを検証できるようになりました。

WebKit はすでに部分的にサポートされています。フォームコントロールのプロパティを使用して制約を記述し、JavaScript で checkValidity() API を使用してフォームコントロールとフォーム入力全体の有効性をクエリできるようになりました。 ValidityState API を使用して、どの制約に違反したかを把握することもできます。

ただし、WebKit は以前は対話型 HTML フォーム検証をサポートしていませんでした。対話型 HTML フォーム検証は、フォームが送信されたとき (

要素に novalidate 属性が設定されている場合を除く)、または reportValidity() API を使用したときに発生します。さらに、Webkit がこれをサポートし、Safari Technology Preview 19 でこの機能が有効になったことを発表できることを嬉しく思います。インタラクティブなフォーム検証により、WebKit はフォーム内のすべてのフォームコントロールを検証するようになりました。フォームコントロールが 1 つでも制約に違反している場合、WebKit は最初のフォームコントロールに入力フォーカスを置き、インターフェイスページをスクロールしてコントロールを表示し、その横に問題を説明するバブルメッセージを表示します。

検証の制約

入力タイプ

一部の入力タイプには固有の制約があります。タイプが「電子メール」、「番号」または「URL」に設定されている場合、入力された値が有効な電子メールアドレス、番号、または URL であるかどうかが自動的にチェックされます。例:

<input type="email">

ログイン後にコピー

属性を確認します

次のプロパティを使用して、フォームコントロールの制約を記述することができます:

required: 値を入力する必要があることをユーザーに伝えます。
pattern="[a-z]": 指定された JavaScript 正規表現に一致する値を入力する必要があることをユーザーに伝えます。
minlength=x: 少なくとも x 文字の値を入力する必要があることをユーザーに伝えます。
maxlength=y: 最大 x 文字の値を入力する必要があることをユーザーに伝えます。
min=x: x 以上の値を入力する必要があることをユーザーに伝えます。。
max=y: y 以下の値を入力する必要があることをユーザーに伝えます。
step=x: 最小値に x の倍数を加えた値に基づいて値を入力する必要があることをユーザーに伝えます。

制約の検証

制約検証は、次の集中的な方法でトリガーできます:

checkValidity() は、フォーム要素または特定のフォームコントロールに対して呼び出すことができます。制約に違反すると、このメソッドは false を返します。同時に、制約に違反する要素に対して「無効」と呼ばれるイベントもトリガーされます。フォームコントロールの "validity" プロパティを通じて公開される ValidityState オブジェクトを使用して、どの制約に違反したかを確認できます。
reportValidity() は、フォーム制約または特定のフォームコントロールに対して呼び出すことができます。これにより、制約の対話型検証がトリガーされます。さらに、checkValidity() と reportValidity() は、制約違反がチェックされた最初の要素に入力フォーカスを置き、その横に問題を説明するバブルメッセージを表示します。
要素に「novalidate」属性が設定されていない限り、フォームの送信時に対話型フォーム検証も行われます。

カスタム制約

検証に JavaScript を使用し、setCustomValidity() API を活用することで、より複雑な検証制約を実装したり、制約に違反する入力に対してより有用なエラーメッセージを提供したりできます。

JavaScript は、フォームコントロール上の特定のイベント (例: onchange、oninput など) をリッスンすることによってトリガーできます。実行された JavaScript コードはフォームコントロールのデータを検証し、setCustomValidity() を使用してコントロールのエラーメッセージを更新します:

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

ログイン後にコピー

確認メッセージのバブルプロンプト

インタラクティブなフォーム検証を実行すると、次のように、制約に違反していることが検証されたデータを持つ最初のフォームコントロールの横に、問題を説明するバブルプロンプトが表示されます。

一部のローカライズされた検証メッセージは、特定の制約に対してデフォルトで設定されています。検証メッセージをカスタマイズしたい場合は、setCustomValidity() API の使用を検討してください。 WebKit は JavaScript の国際化 API もサポートしているので、カスタム検証メッセージのローカライズに役立ちます。