在下一个字段之前使用 Javascript 验证电子邮件 - Javascript

在 Web 开发中，验证表单输入是一项非常基本的任务。本文介绍了如何使用 JavaScript 编写代码来验证电子邮件地址，以确保用户在提交表单之前已经输入了正确的格式。

需求

在这个场景下，我们有一个表单，其中包含一个输入电子邮件地址的字段。我们需要确保用户在提交表单之前输入的是正确的格式，否则我们需要显示一个错误消息，并停止表单的提交。

实现

正则表达式

我们将使用正则表达式来检查输入的电子邮件地址格式是否正确。以下是一个符合电子邮件地址标准的正则表达式示例：

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

这个正则表达式的意思是：

• 以一个或多个非空格字符开头；
• 然后是一个 @ 符号；
• 然后是一个或多个非空格字符；
• 接着是一个点号；
• 最后一个字符组中必须有一个字母，且至少包含两个字符。

验证函数

我们将创建一个名为 validateEmail 的函数，该函数接收一个参数 email。该函数将返回一个布尔值来指示输入的电子邮件地址是否符合标准。

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

在 "submit" 事件之前验证表单

现在我们可以使用这个 validateEmail 函数来验证表单字段中的电子邮件地址。我们将利用表单的 "submit" 事件来拦截表单的提交。

const form = document.querySelector('form');
const emailInput = document.querySelector('input[type="email"]');

form.addEventListener('submit', (event) => {
  if (!validateEmail(emailInput.value)) {
    event.preventDefault();
    emailInput.classList.add('error');
    const errorMessage = document.createElement('div');
    errorMessage.innerHTML = '请输入有效的电子邮件地址。';
    emailInput.parentNode.insertBefore(errorMessage, emailInput.nextSibling);
  }
});

此处，我们使 event.preventDefault() 阻止了表单的默认操作，即提交表单。然后，我们将 error 类添加到输入字段上，以便样式表显示出错。最后，我们创建一个新的 div 元素，将错误消息写入该元素，并将其添加到文档中。

完整代码

以下是完整代码：

const form = document.querySelector('form');
const emailInput = document.querySelector('input[type="email"]');

function validateEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

form.addEventListener('submit', (event) => {
  if (!validateEmail(emailInput.value)) {
    event.preventDefault();
    emailInput.classList.add('error');
    const errorMessage = document.createElement('div');
    errorMessage.innerHTML = '请输入有效的电子邮件地址。';
    emailInput.parentNode.insertBefore(errorMessage, emailInput.nextSibling);
  }
});

结论

通过此方法，我们可以轻松地利用 JavaScript 和正则表达式验证表单输入的电子邮件地址。这是一个非常简单的解决方案，可以用于验证其他表单字段的格式。