javascript - 使用 javascript 进行电子邮件验证，并在输入字段下方显示自定义消息

Question

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

const email = document.querySelector('.email');
const form = document.querySelector('.form');
const emailMessage = document.querySelector('.empty-email-message');
const errorEmail = document.querySelector('.invalid-email-message');

form.addEventListener('submit', e => {
  if (!email.value) {
    e.preventDefault();
    // setTimeout(() => {
    //   emailMessage.style.display = 'none';
    // }, 1000);
    emailMessage.innerHTML = 'You must type in an email';
  } else {
    emailMessage.innerHTML = '';
    // return true;
  }
});

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
  errorEmail.value = '';
} else {
  errorEmail.value = 'email is invalid';
}

 <form class="form" id="form" action="submit">
    <input class="email" type="email" />
    <button class="submit-email" type="submit">Go</button>
    <!-- dont use id -->
    <p class="empty-email-message"></p>
    <p class="invalid-email-message"></p>
</form>

Answer 1

您提到了函数作用域之外的条件，因此请将其放在函数作用域内并首先检查电子邮件是否有值(value)，

如果它有值(value)，则检查正则表达式匹配。

如果正则表达式匹配与提供的输入不匹配，则显示错误消息，errorEmail.textContent = 'email is invalid'; 并确保您将空错误消息设置为 '' 空字符串..

如果你想对用户输入进行验证，那么你可以按照这个方法 https://codepen.io/Maniraj_Murugan/pen/WNvxQPq

注意:

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

const email = document.querySelector('.email');
const form = document.querySelector('.form');
const emailMessage = document.querySelector('.empty-email-message');
const errorEmail = document.querySelector('.invalid-email-message');

form.addEventListener('submit', e => {
    if(email.value){
    const regexMatch = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value);
    if (regexMatch) {
          errorEmail.textContent = '';
        } else {
          e.preventDefault();
          errorEmail.textContent = 'email is invalid';
          emailMessage.textContent = "";
        }
    } else {
      e.preventDefault();
      emailMessage.textContent = 'You must type in an email';
      errorEmail.textContent = "";
    }
});

<form class="form" id="form" action="submit">
    <input class="email" type="email" />
    <button class="submit-email" type="submit">Go</button>
    <!-- dont use id -->
    <p class="empty-email-message"></p>
    <p class="invalid-email-message"></p>
 </form>