在 Vue 中更愉快的 HTML5 表单验证

我们可以使用 CSS 中的 input:invalid {} 来为输入处于无效状态时设置样式，这很酷。但是，直接使用这种方式，用户体验很糟糕。假设您有 <input type="text" required>。这在用户执行任何操作之前就立即无效。这种糟糕的用户体验在现实中从未见过。但如果我们能够避免这种情况，那么 :invalid 选择器可以在表单验证中为我们做很多工作，而无需依赖庞大的库。

Dave 提出了一种想法，是对 2017 年最初想法 的变体。

基本上就是

form.errors :invalid {
  outline: 2px solid red;
}

现在，只有在您确定表单处于错误状态并添加类之后，才会应用这些原生错误样式。幸运的是，测试也很容易。当单击提交按钮时，我们可以应用该类

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

或者，您可以在输入失去焦点时或其他时候进行操作。您甚至可以将每个输入集包装在一个包装器中，并在适当的时候切换包装器上的类。此处注释掉的代码可以帮助您入门……

Dave 将这个想法扩展到了 Vue

我们使用 errors: false 初始化表单组件，因为我们不想在用户提交表单之前显示错误样式。invalidateForm 函数只是设置 this.error = true。这是 CSS :invalid 伪类的一个问题，它太急切了。挂钩到 invalid 事件，会将样式延迟到第一次表单提交尝试之后，我们知道表单存在错误。

不使用任何库（除了您已经使用的库之外）非常棒。HTML 表单验证几乎已经足够了。这是 Dave 代码的一个分支，其中错误消息也显示出来了

直接链接 →