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

Question

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

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

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

我假设我必须发送 async http 请求(我在服务器端使用 node js)，但我想遵循这方面的最佳实践。

Answer 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有关此问题的更多示例。