更快乐的HTML5表格验证

CSS的input:invalid {}样式在表单元素无效时很有用，但直接使用用户体验很差。例如，表单加载时立即显示无效样式，这会让用户感到困惑。因此，这种用法在实际应用中很少见。然而，如果能避免这个问题，:invalid选择器就能在表单验证中发挥巨大作用，而无需依赖大型库。

Dave提出了一种改进方案，基于2017年的原始想法：

<code>form.errors :invalid {
  outline: 2px solid red;
}</code>

只有在确定表单处于错误状态并添加了errors类后，才会应用原生错误样式。测试也很容易。例如，可以在提交按钮点击时应用该类：

<code>submitButton.addEventListener("click", (e) => {
  form.classList.toggle("errors", !form.checkValidity())
});</code>

也可以在输入框失去焦点时或其他时机应用。甚至可以将每个输入框用包装器包裹，并在适当的时候切换包装器的类。

Dave将此想法应用于Vue：

我们初始化表单组件时将errors设置为false，因为我们不希望在用户提交表单之前显示错误样式。invalidateForm函数只是将this.error设置为true。这是CSS :invalid伪类的缺点之一，它过于急切。通过监听invalid事件，可以延迟样式的应用，直到第一次表单提交尝试之后，我们知道表单存在错误。

这种方法无需额外引入库，充分利用了HTML表单验证的原生功能。以下链接是一个改进的版本，也显示了错误消息：

直接链接 →

以上是更快乐的HTML5表格验证的详细内容。更多信息请关注PHP中文网其他相关文章！