自定义检查的HTML5约束验证

ocebsuys 于 2022-11-27 发布在 HTML5

关注(0)|答案(2)|浏览(151)

我想检查用户名和电子邮件地址是否是唯一的客户端。
是否有任何方法可以为约束验证添加自定义验证？
或者有没有其他推荐的方法？
我假设我必须发送 async http请求（我在服务器端使用节点js），但我希望遵循这一点的最佳实践。

Html

来源：https://stackoverflow.com/questions/57575668/html5-constraint-validation-for-custom-check

2条答案

按热度按时间

eimct9ow1#

是的，您可以使用约束验证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文档以获取有关此问题的更多示例。

赞(0）回复(0）举报 2022-11-27

guykilcj2#

你可以在输入的模糊请求检查什么用户已经写在输入是唯一的或不是，并显示结果给用户与复选标记或红色X，或者你可以显示用户后，他点击注册按钮，但我更喜欢第一个解决方案

赞(0）回复(0）举报 2022-11-27