HTML5 のフォーム検証の 8 つの方法の詳細な紹介

フォーム検証について詳しく説明する前に、まずフォーム検証の本当の意味について考えてみましょう。フォーム検証の核心は、無効な制御データを検出し、エンド ユーザーにエラーのフラグを立てるシステムです。つまり、フォーム検証では、フォームがサーバーに送信される前にフォームに対して一連のチェックが実行され、ユーザーにエラーを修正するように通知されます。
しかし、フォーム検証とは実際には何でしょうか?
は最適化です。
フォーム検証が最適化である理由は、サーバーに送信されたフォーム データが正確で有効であることを確認するには、フォーム検証メカニズムだけでは十分ではないためです。一方、フォーム検証は、Web アプリケーションがエラーをより速くスローできるように設計されています。つまり、Web ページに無効なフォーム コントロール値が含まれていることをユーザーに通知するには、ブラウザーの組み込み処理メカニズムを使用するのが最善です。以前は、サーバーがユーザーに間違ったデータを入力したことを通知するためにのみ、データがネットワーク上を移動していました。ブラウザーがクライアントから離れる前にエラーをキャッチできる機能を十分に備えている場合は、これを活用する必要があります。
ただし、ブラウザのフォームチェックだけではすべてのエラーを処理するのに十分ではありません。
そうは言っても、HTML5 では、フォーム コントロールのデータの正確性を検証するための 8 つの方法が導入されています。それらを順番に見ていきますが、最初に、検証ステータスをフィードバックするために使用される ValidityState オブジェクトを紹介します。
Html5 フォーム検証をサポートするブラウザでは、フォーム コントロールを介して ValidityState オブジェクトにアクセスできます。

var valCheck = document.myForm.myInput.validity;

このコード行は、myInput という名前のフォーム要素の ValidityState オブジェクトを取得します。オブジェクトには、8 つの検証状態すべてへの参照と、最終的な検証結果が含まれています。
呼び出しメソッドは次のとおりです:

valCheck.valid

実行後、フォーム コントロールがすべての検証制約を通過したかどうかを示すブール値を取得します。 valid 属性は最終的な検証結果とみなすことができます。8 つの制約がすべて合格した場合、valid 属性は true になります。そうでない場合、1 つの制約が失敗する限り、valid フラグは false になります。
前述したように、フォーム要素には 8 つの検証制約が考えられます。各条件には、ValidityState オブジェクト内に対応する属性名があり、適切な方法でアクセスできます。それらを 1 つずつ分析して、フォーム コントロールとどのように関連付けられているか、および ValidityState オブジェクトに基づいてチェックする方法を確認してみましょう:
1. valueMissing
目的: フォーム コントロールの値が入力されていることを確認します。
使用法: フォーム コントロールで required 属性を true に設定します。
例:

<input type="text" name="myText" required>

詳細な説明: フォーム コントロールが必須属性を設定している場合、ユーザーが値を入力するか、コード呼び出しを通じて値を入力するまで、コントロールは無効な状態のままになります。たとえば、空のテキスト入力ボックスは、テキストが入力されない限り、必要なチェックに合格しません。入力値が空の場合、valueMissing は true を返します。
2. typeMismatch
目的: コントロールの値が予期されるタイプ (数値、電子メール、URL など) と一致することを確認します。
使用法: フォーム コントロールの type 属性値を指定します。
例:

<input type="email" name="myEmail">

詳細な説明: 特殊なフォーム コントロール タイプは、フォーム コントロールへの入力が対応するタイプ ルールに準拠していないことをブラウザが認識できる場合、たとえば携帯電話のキーボードをカスタマイズするために使用されるだけではありません。電子メール アドレス内の @ 記号、または数値タイプのコントロールの入力値が有効な数値ではない場合、ブラウザはコントロールにタイプの不一致を示すマークを付けます。エラー条件に関係なく、typeMismatch は true を返します。
3. patternMismatch
目的: 入力がフォーム コントロールに設定された形式ルールに従って有効な形式であるかどうかを確認します。
使用法: フォームコントロールにパターン属性を設定し、適切な一致ルールを割り当てます。
例:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

詳細: pattern 属性は、フォーム コントロール値の正規表現検証メカニズムを設定する強力かつ柔軟な方法を開発者に提供します。コントロールにパターン属性が設定されている場合、入力コントロールの値がパターン ルールに準拠していない限り、patternMismatch は true 値を返します。ユーザー ガイダンスと技術リファレンスの観点から、ルールの役割を示すために、pattern 属性を含むフォーム コントロールに title 属性を設定する必要があります。
4. tooLong
目的: 入力値に文字数が多すぎることを避けるため。
使用法: フォーム コントロールに maxLength 属性を設定します。
例:

<input type="text" name="limitedText" maxLength="140">

詳細: 入力値の長さが maxLength を超える場合、tooLong 機能は true を返します。通常、フォーム コントロールはユーザー入力の最大長を制限しますが、プログラムで設定するなどして最大長を超える可能性がある状況もあります。
5. rangeUnderflow
目的: 数値制御の最小値を制限します。
使用法: フォーム コントロールの min 属性を設定し、許容される最小値を指定します。
例:

<input type="range" name="ageCheck" min="18">

詳細説明: 数値範囲チェックが必要なフォームコントロールでは、値が一時的に設定された下限値よりも低くなる可能性があります。このとき、ValidityState の rangeUnderflow プロパティは true を返します。
6. rangeOverflow
目的: 数値制御の最大値を制限します。
使用法: フォーム コントロールの max 属性を設定し、最大許容値を指定します。
例:

<input type="range" name="kidAgeCheck" max="12">

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。
7、stepMismatch
目的：确保输入值符合min、max及step即设置。
用法：为表单控件设置step特性，指定数值的增量。
示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。
8、customError
目的：处理应用代码明确设置及计算产生的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。
自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

以上就是详解HTML5中表单验证的8种方法介绍 的内容，更多相关内容请关注PHP中文网（www.php.cn）！