HTML5でのフォーム検証の方法にはどのようなものがありますか?

フォーム検証方法: 1. フォーム コントロールで required 属性を true に設定します; 2. フォーム コントロールで pattern 属性を設定し、適切な一致ルールを割り当てます; 3. フォーム コントロールで maxLength 属性を設定します。 4. フォーム コントロールの min プロパティと max プロパティを設定し、許可される最小値と最大値を割り当てます。

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

今日は HTML5 フォーム検証について話しましょう。フォーム検証に入る前に、まずフォーム検証が実際に何を意味するのかを考えてみましょう。フォーム検証の核心は、無効な制御データを検出し、エンド ユーザーに対してこれらのエラーにフラグを付けるシステムです。つまり、フォーム検証では、フォームがサーバーに送信される前にフォームに対して一連のチェックが実行され、ユーザーにエラーを修正するように通知されます。

しかし、フォーム検証とは実際には何なのでしょうか?

は最適化です。

フォーム検証が最適化である理由は、サーバーに送信されたフォーム データが正しく有効であることを確認するには、フォーム検証メカニズムだけでは十分ではないためです。一方、フォーム検証は、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、範囲アンダーフロー

目的：限制数值型控件的最小值。

用法：为表单控件设置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("")即可。

相关推荐：《html视频教程》

以上がHTML5でのフォーム検証の方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。