Javascript 使用自定义有效性的异步表单验证

我想让用户只在用户不存在时提交表单。为此，我构建了一个小的RESTAPI来检查输入模糊或表单提交中是否已经存在键入的用户。这很有效

最棘手的部分是设置自定义有效性。我希望尽可能多地使用本机表单验证和错误处理。所以我动态地设置和取消设置pattern属性

问题1:按enter键提交表单时，无效输入的消息不会显示（我可以手动触发表单以显示有效性消息吗？）

问题2:输入无效名称时，请提交，然后输入有效名称，然后再次提交，验证错误消息很快出现，然后消失。（由于必须同步调用preventDefault，我是否应该在输入有效时重新提交表单，并删除eventlistener以进行提交，从而使表单得到提交

我准备了一个小代码笔与大家分享：

这是关于我的问题的代码：

usernameInput.addEventListener('blur', async (e)=>{
    let isValid = await isUserValid(e.target)
    console.log(isValid)
})

form.addEventListener('submit', async (e)=>{
    e.preventDefault()
    let isValid = await isUserValid(usernameInput)
    console.log(isValid)
})

提前谢谢你

最好的，

---

Martin

您可以使用javasript

checkValidity（）

触发验证

form.addEventListener('submit', async (e)=>{
    e.preventDefault()
    e.target.checkValidity(); //this check
    let isValid = await isUserValid(usernameInput)
    console.log(isValid)
})

---

谢谢。

isUserValid

会异步检查用户的有效性，所以在我执行该检查之前，我不知道用户是否有效（但我知道，所以我不再需要

checkValidity

）.

checkValidity

但是只返回true或false，它不会显示有效性消息。我刚刚发现

reportValidity（）

也会显示有效性消息。除此之外，您还想解决什么问题？请自己查看：如果有效性延迟，则无法提交正确的值-因为验证检查延迟，并且在输入无效时不会触发提交事件。此外，如果我模糊输入元素，然后想要提交，则无法提交，b因为我调用了

preventDefault

。所以当值正确时，我必须删除表单事件处理程序？@martinmuzatkok15t软件我认为您希望在用户每次按键检查有效性时使用按键事件来检查