在输入字段下方使用javascript和自定义消息进行电子邮件验证

我有一个带有电子邮件输入字段的简单表单。当电子邮件输入为空时，我想在字段下方得到一个错误，我的代码已经这样做了。 但是，如果电子邮件未经验证，我希望在输入字段下方显示一条消息。目前，我只能得到错误消息，电子邮件在任何时候都是无效的。 因此，基本上，用户要么将输入留空，然后收到您必须在电子邮件中键入的错误消息，要么不提供有效电子邮件，然后收到另一条错误消息

const email=document.querySelector.email'； const form=document.querySelector.form'； const emailMessage=document.querySelector'.empty email message'； const errorEmail=document.querySelector'.无效的电子邮件'； form.addEventListener'submit'，e=>{ 如果！email.value{ e、 防止违约； //设置超时=>{ //emailMessage.style.display='none'； // }, 1000; emailMessage.innerHTML='您必须键入电子邮件'； }否则{ emailMessage.innerHTML=； //返回true； } }; 如果/^\w+[\.-]？\w+*@\w+[\.-]？\w+*.\w{2,3}+$/.testemail.value{ errorEmail.value=； }否则{ errorEmail.value='电子邮件无效'； } 去

---

您已经提到了函数范围之外的条件，所以将其设置为函数范围内 首先检查电子邮件是否有价值

如果它有值，则检查正则表达式是否匹配

如果正则表达式匹配与提供的输入不匹配，则显示错误消息， errorEmail.textContent='电子邮件无效'；并确保将空错误消息设置为空字符串

如果您想对用户输入进行验证，那么可以采用这种方法

注:

除非要替换HTML元素，否则不要使用innerHTML，如果只替换文本，请使用textContent

const email=document.querySelector.email'； const form=document.querySelector.form'； const emailMessage=document.querySelector'.empty email message'； const errorEmail=document.querySelector'.无效的电子邮件'； form.addEventListener'submit'，e=>{ ifemail.value{ const regexMatch=/^\w+[\.-]？\w+*@\w+[\.-]？\w+*\.\w{2,3}+$/.testemail.value； 如果regexMatch{ errorEmail.textContent=； }否则{ e、 防止违约； errorEmail.textContent='电子邮件无效'； emailMessage.textContent=； } }否则{ e、 防止违约； emailMessage.textContent='您必须键入电子邮件'； errorEmail.textContent=； } }; 去

---

只是一个问题，为什么您需要将电子邮件输入类型更改为文本？@HesamAlavi，很抱歉，我已经出于测试目的对其进行了修改，因为type=email进行了浏览器验证，但忘记了恢复。。现在用type email编辑了答案。没问题，但是如果是type=email，浏览器验证不会覆盖代码吗？有什么办法吗？@HesamAlavi，如果您想覆盖默认的浏览器验证，请使用type=text，因为您已经通过regex检查了有效的电子邮件。。因此，我希望您可以使用type=text，但如果您希望同时使用浏览器验证，那么请使用type=email。另外，我希望您了解一下，使用type-email，我已经用输入事件侦听器覆盖了浏览器验证。。在这里，您将只看到type=email的电子邮件验证。。