HTML インタラクティブ フォーム検証メソッドの簡単な紹介

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

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

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

ただし、WebKit は以前は対話型 HTML フォーム検証をサポートしていませんでした。対話型 HTML フォーム検証は、フォームが送信されたとき (ff9c23ada1bcecdd1a0fb5d5a0f18437 要素に 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: min に x の倍数を加えた値を入力する必要があることをユーザーに伝えます。

制約の検証

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

• は、フォーム要素または特定のフォーム コントロール checkValidity() で呼び出すことができます。制約に違反すると、このメソッドは false を返します。同時に、制約に違反する要素に対して「無効」と呼ばれるイベントもトリガーされます。フォーム コントロールの "validity" プロパティを通じて公開される ValidityState オブジェクトを使用して、どの制約に違反したかを確認できます。

• フォーム制約または特定のフォーム コントロールに対して reportValidity() を呼び出すことができます。これにより、制約の対話型検証がトリガーされます。さらに、checkValidity() と reportValidity() は、制約違反がチェックされた最初の要素に入力フォーカスを置き、その横に問題を説明するバブル メッセージを表示します。

• ff9c23ada1bcecdd1a0fb5d5a0f18437 要素に "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 技术预览版 19 中也是启用了的。

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