A brief introduction to HTML interactive form validation methods

Verification constraints

​Input type

Some input types have inherent constraints. If type is set to “email”, “number” or “URL”, it will automatically check whether the entered value is a valid email address, number or URL, for example:

<input type="email">

Verification attributes

The following properties can be used to describe constraints in form controls:

• required: Tells the user that a value must be entered.

• pattern="[a-z]": Tells the user that they must enter a value that matches the given JavaScript regular expression.

• minlength=x: Tells the user that they must enter a value that is at least x characters long.

• maxlength=y: Tells the user that they must enter a value of at most x characters.

• min=x: Tells the user that they must enter a value greater than or equal to x. .

• max=y: Tells the user that they must enter a value less than or equal to y.

• step=x: Tell the user that they must enter a value that is based on min plus a multiple of x .

Constraint verification

Constraint validation can be triggered in the following centralized way:

• You can call checkValidity() on a form element or a specific form control. This method will return false if a constraint is violated. At the same time, it will also trigger an event called "invalid" on the element that violates the constraint. You can check which constraint was violated using the ValidityState object exposed through the "validity" property on the form control.

• #reportValidity() can be called on a form constraint or a specific form control. Doing so triggers interactive validation of the constraints. In addition, checkValidity() and reportValidity() will also put the input focus on the first element that is checked to violate the constraint, and display a bubble message next to it to describe the problem.

• Interactive form validation also occurs when the form is submitted, unless the "novalidate" attribute is set on the element.

Custom constraints

By using JavaScript for validation and leveraging the setCustomValidity() API, you can implement more complex validation constraints or provide more useful error messages for inputs that violate constraints.

　　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>

　验证消息气泡提示

　　在进行交互式表单验证的时候, 一个针对问题进行说明的气泡提示会显示在第一个拥有被验证违反约束的数据的表单控件旁边, 像这样:

　　针对特定的约束默认设置了一些本地化的验证消息。如果你希望对验证消息进行自定义, 可以考虑使用 setCustomValidity() API。注意，WebKit 对于 JavaScript 的国际化 API 也是支持的，这个能够帮助我们对自定义的验证消息进行本地化。

　总结

　　HTML 交互式表单验证现在已经在 Webkit 中得到了支持，并且在 Safari 技术预览版 19 中也是启用了的。

The above is the detailed content of A brief introduction to HTML interactive form validation methods. For more information, please follow other related articles on the PHP Chinese website!