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

検証の制約

入力タイプ

一部の入力タイプには固有の制約があります。タイプが「電子メール」、「番号」または「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 もサポートしているので、カスタム検証メッセージのローカライズに役立ちます。

まとめ

HTML インタラクティブ フォーム検証が Webkit でサポートされるようになり、Safari Technology Preview 19 で有効になります。この機能を体験するには、オンライン デモをお試しください。バグの報告も大歓迎です。

以上がHTML インタラクティブ フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。