HTML5 自定义检查的约束验证

Question

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

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

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

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

Answer 1

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

Answer 2

是的，您可以使用来自约束验证 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 在随附的表格上调用 returns false 那么。

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

HTML5 自定义检查的约束验证

HTML5 constraint validation for custom check

html

javascript

constraint-validation