HTML如何实现交互式表单验证方法-创新互联

　验证的约束

　　输入类型

有一些输入类型本身就拥有一些内在的约束。将 type 设置为 “email”, “number” 或者 “URL” 的话，就会自动检查输入的值是否是有效的电子邮件地址、数字或者 URL, 例如:

　　验证属性

下面的属性可以被用来在表单控件中描述约束:

• required: 告诉用户必须输入一个值。

• pattern=“[a-z]”: 告诉用户必须输入一个可以匹配给定 JavaScript 正则表达式的值。

• minlength=x: 告诉用户必须输入一个至少有 x 个字符的值。

• maxlength=y: 告诉用户必须输入一个至多有 x 个字符的值。

• min=x: 告诉用户必须输入一个大于或者等于 x 的值。。

• max=y: 告诉用户必须输入一个小于或者等于 y 的值。

• step=x: 告诉用户必须输入一个在 min 的基础上加上 x 的倍数的值。

　约束验证

约束验证可以用以下集中方式触发：

• 可以在一个表单元素或者特定的表单控件上调用 checkValidity() 。这个方法会在有约束被违反的时候返回 false。同时它也会在违反约束的元素上触发一个叫做“invalid”的事件。可以使用通过表单控件上的“validity”属性所暴露的 ValidityState 对象来检查违反了哪个约束。

• 可以在一个表单约束或者特定的表单控件上调用 reportValidity()。这样做会触发针对约束的交互式验证。此外 checkValidity(), reportValidity() 也会将输入焦点放到第一个被检查出违背了约束的元素上，并且在其旁边显示一个气泡消息来对问题进行描述。

• 交互式表单验证也会在提交表单的时候发生，除非在元素上设置了“novalidate”属性。

　自定义约束

使用 JavaScript 来做验证然后利用 setCustomValidity() API 的话，可以实现更加复杂的验证约束或者向校验出违反约束的输入项提供更加有用的错误消息。

JavaScript 可以通过在一个表单控件上侦听给定的事件来触发(例如： onchange, oninput, …) 。然后被执行的 JavaScript 代码可以对表单控件的数据进行验证，然后使用 setCustomValidity() 来对控件的错误消息进行更新：

Feeling:

　验证消息气泡提示

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

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

关于“HTML如何实现交互式表单验证方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。