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

今回は、H5 フォーム検証 の方法と、H5 フォーム検証 の注意点 について、実際の事例を紹介します。

フォーム検証について詳しく説明する前に、まずフォーム検証の本当の意味について考えてみましょう。フォーム検証の核心は、無効な制御データを検出し、エンド ユーザーにエラーのフラグを立てるシステムです。つまり、フォーム検証では、フォームがサーバーに送信される前にフォームに対して一連のチェックが実行され、ユーザーにエラーを修正するように通知されます。

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

は最適化です。

フォーム検証が最適化である理由は、サーバーに送信されたフォーム データが正しく有効であることを確認するには、フォーム検証メカニズムだけでは十分ではないためです。一方、フォーム検証は、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特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了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("")即可。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

spring mvc+localResizeIMG实现H5端图片压缩上传

canvas与h5如何实现视频截图功能

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