HTML 交互式表单验证

2016 年 12 月 12 日

作者：Chris Dumez

在 HTML 中创建表单一直很复杂。首先需要编写正确的标记，然后需要在提交前确保每个字段都有有效的值，最后当出现问题时需要通知用户。

幸运的是，HTML5 中引入了新功能，这让事情变得容易得多。特别是，表单控件得到了扩展以支持约束，从而允许浏览器在客户端验证表单内容，而无需 JavaScript。

WebKit 已对此提供了部分支持。可以使用表单控件上的属性来描述约束，然后使用 JavaScript 中的 checkValidity() API 查询表单控件或整个表单的有效性。还可以使用 ValidityState API 了解违反了哪个约束。

然而，WebKit 不支持 HTML 交互式表单验证，这种验证发生在表单提交时（除非在 <form> 元素上设置了 novalidate 属性）或使用 reportValidity() API 时。我们很高兴地宣布，此功能现已在 WebKit 中实现，并在 Safari Technology Preview 19 中启用。在进行交互式表单验证时，WebKit 现在会检查表单中所有表单控件的有效性。如果至少有一个表单控件违反了约束，WebKit 将聚焦于第一个违规控件，将其滚动到视图中，并在其附近显示一个气泡，其中包含解释问题的消息。

验证约束

输入类型

某些输入类型具有固有约束。将类型设置为“email”、“number”或“URL”将自动检查值是否为有效的电子邮件、数字或 URL，例如：

<input type="email">

验证属性

以下属性可用于描述表单控件上的约束

required：指示用户必须输入一个值。
pattern=“[a-z]”：指示用户必须输入一个与提供的 JavaScript 正则表达式匹配的值。
minlength=x：指示用户输入的值必须至少包含 x 个字符。
maxlength=y：指示用户输入的值最多包含 y 个字符。
min=x：指示用户输入的值必须大于或等于 x。
max=y：指示用户输入的值必须小于或等于 y。
step=x：指示用户输入的值必须是 min + x 的整数倍。

约束验证

约束验证可以通过多种方式进行

可以在表单元素或特定的表单控件上调用 checkValidity()。如果违反了任何约束，它将简单地返回 false，否则返回 true。它还会在无效元素上触发一个名为“invalid”的事件。可以使用通过表单控件上的“validity”属性暴露的 ValidityState 对象来检查违反了哪个约束。
可以在表单元素或特定的表单控件上调用 reportValidity()。这将触发约束的交互式验证。除了执行与 checkValidity() 相同的功能外，reportValidity() 还会聚焦第一个无效元素，将其滚动到视图中，并在其附近显示一个气泡，其中包含解释问题的消息。
交互式表单验证在提交表单时也会发生，除非在 <form> 元素上设置了“novalidate”属性。

自定义约束

可以使用 JavaScript 进行验证，然后使用 setCustomValidity() API 来实现更复杂的验证约束或为无效输入提供更有用的错误消息。

通过监听表单控件上的给定事件（例如 onchange、oninput 等），可以触发 JavaScript。执行的 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('"' + input.value + '" is not a feeling');
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity('');
   }
 }
</script>

验证消息气泡

进行交互式表单验证时，在第一个包含无效数据的表单控件附近将显示一个气泡，其中包含解释问题的消息，如下所示：

对于内置约束，有一组默认的本地化验证消息。如果希望自定义验证消息，可以考虑使用 setCustomValidity() API。请注意，WebKit 还支持 JavaScript 国际化 API，这有助于自定义验证消息的本地化。

结论

WebKit 现已支持 HTML 交互式表单验证，并在 Safari Technology Preview 19 中默认启用。请尝试我们的在线演示并体验此功能。欢迎提交 Bug 报告。