javascript - 用于自定义检查的 HTML5 约束验证

Question

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

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

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

我假设我必须发送异步http 请求（我在服务器端使用节点 js），但希望遵循此请求的最佳实践。

Answer 1

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

Answer 2

是的，您可以使用setCustomValidity约束验证 api 中的函数，它是每个表单字段的一部分（例如，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 文档以获取有关此问题的更多示例。