What are the methods for H5 form verification?

This time I will bring you H5Form verificationWhat are the methods, what are the Notes of H5 form verification, the following is a practical case, let's take a look.

Before we discuss form validation in depth, let us first think about the true meaning of form validation. At its core, form validation is a system that detects invalid control data and flags these errors for end users. In other words, form validation performs a series of checks on the form before it is submitted to the server and notifies the user to correct errors.

But what is form validation really?

is an optimization.

The reason why form validation is an optimization is because the form validation mechanism alone is not enough to ensure that the form data submitted to the server is correct and valid. On the other hand, form validation is designed to make web applications throw errors faster. In other words, it's best to use the browser's built-in handling mechanism to notify the user that a web page contains invalid form control values. In the past, data traveled around the network only for the server to notify the user that he had entered incorrect data. If the browser is fully capable of allowing errors to be caught before they leave the client, then we should take advantage of this.

However, the browser's form checking is not enough to handle all errors.

Having said that, HTML5 introduces eight methods for verifying the correctness of data in form controls. Let's look at them in turn, but first we'll introduce the ValidityState object used to feedback validation status.

In browsers that support Html5 form validation, the ValidityState object can be accessed through the form control:

var valCheck = document.myForm.myInput.validity;

This line of code obtains the ValidityState object of the form element named myInput. The object contains references to all eight verification states, as well as the final verification result.

The calling method is as follows:

valCheck.valid

After execution, we will get a Boolean value, which indicates whether the form control has passed all validation constraints. The valid attribute can be regarded as the final verification result: if all eight constraints are passed, the valid attribute is true. Otherwise, as long as one constraint fails, the valid flag is false.

As mentioned before, there are eight possible validation constraints for any form element. Each condition has a corresponding attribute name in the ValidityState object, which can be accessed in the appropriate way. Let's analyze them one by one to see how they are associated with the form controls and how to check them based on the ValidityState object:

1, valueMissing

Purpose: Ensure that the value in the form control is filled in.

Usage: Set the required attribute to true in the form control.

Example:

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

Detailed description: If the form control sets the required attribute, the control will remain in an invalid state until the user fills in the value or fills in the value through code call. For example, an empty text input box fails the required check unless any text is entered into it. When the input value is empty, valueMissing returns true.

2. typeMismatch

Purpose: To ensure that the control value matches the expected type (such as numbe, email, URL, etc.).

Usage: Specify the type attribute value of the form control.

Example:

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

Detailed description: The special form control type is not only used to customize the mobile phone keyboard. If the browser can recognize that the input in the form control does not comply with the corresponding type rules, such as There is no @ symbol in the email address, or the input value of the number type control is not a valid number, then the browser will mark the control to indicate a type mismatch. Regardless of the error condition, typeMismatch will return true.

3. patternMismatch

Purpose: Verify whether the input is in a valid format according to the format rules set on the form control.

Usage: Set the pattern attribute on the form control and assign appropriate matching rules.

Example:

<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如何实现视频截图功能

The above is the detailed content of What are the methods for H5 form verification?. For more information, please follow other related articles on the PHP Chinese website!