HTML インタラクティブフォーム検証メソッドの簡単な紹介-htmlチュートリアル-php.cn

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

巴扎黑

リリース： 2018-05-14 16:34:52

オリジナル

1923 人が閲覧しました

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: min に 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>

ログイン後にコピー