用于自定义检查的 HTML5 约束验证答案

【问题标题】：HTML5 constraint validation for custom check用于自定义检查的 HTML5 约束验证
【发布时间】：2019-09-25 22:10:30
【问题描述】：

我想检查用户名和电子邮件地址在客户端是否唯一。

有没有办法为约束验证添加自定义验证？

或者有其他推荐的方法吗？

我假设我必须发送 async http 请求（我在服务器端使用节点 js），但我想遵循这个最佳实践。

【问题讨论】：

标签： javascript html constraint-validation

【解决方案1】：

是的，您可以使用约束验证 API 中的 setCustomValidity 函数，它是每个表单字段（例如 HTMLInputElement）的一部分。

<input name="username">
<script>
  const field = document.querySelector('[name="username"]');
  field.addEventListener('change', () => {
    fetch('https://example.com/myapiforcheckingusername' {
      method:'POST',
      body: JSON.stringify({username: field.value})
    }).then((response) => {
      const alreadyExists = // process response to check if username already exists

      if (alreadyExists) {
        field.setCustomValidity('The username already exists!');
      }
    });
  });
</script>

上面的代码展示了如何对输入字段进行异步验证。如果setCustomValidity 不是空字符串，则表示这是一个表单错误。如果在随附的表单上调用 checkValidity，则返回 false。

您可以查看MDN documentation 以获取有关此问题的更多示例。

【讨论】：

【解决方案2】：

您可以对输入的模糊提出请求，以检查用户在输入中写入的内容是否唯一，并用复选标记或红色 X 向用户显示结果或者您可以在用户点击注册按钮后显示用户，但我更喜欢第一个解决方案

【讨论】：