Question

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

是否可以添加用于约束验证的自定义验证？

或者还有其他建议的方法吗？

我假设我必须发送 async http请求（我正在服务器端使用节点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，则会返回false。

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

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

2 个答案: