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

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

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

或者有没有其他推荐的方法

---

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

您可以对输入的模糊进行请求，以检查用户在输入中写入的内容是否唯一，并使用复选标记或红色X向用户显示结果

---

或者，您可以在用户单击“注册”按钮后显示用户，但我更喜欢第一个解决方案

是的，您可以使用约束验证api中的

setCustomValidation

函数，该函数是每个表单字段（例如，HTMLInputElement）的一部分

const field=document.querySelector（'[name=“username”]'）；
field.addEventListener（'change'，（）=>{
取（'https://example.com/myapiforcheckingusername' {
方法：'POST'，
正文：JSON.stringify（{username:field.value}）
})。然后（（响应）=>{
const alreadyExists=//处理响应以检查用户名是否已存在
如果（已经存在）{
field.setCustomValidity（'用户名已存在！'）；
}
});
});

上面的代码显示了如何对输入字段进行异步验证。如果

setCustomValidity

不是空字符串，则表示它是一个表单错误。如果在附带的表单上调用了

checkValidity

，则返回

false

您可以查看有关此问题的更多示例