详解JavaScript表单验证（E-mail 验证）

详解JavaScript表单验证（E-mail 验证）

在实现表单验证时，E-mail 验证是一个必不可少的步骤。在本文中，我们将会介绍如何使用 JavaScript 进行 E-mail 验证，以确保用户输入的 E-mail 地址格式正确。

步骤一：获取用户输入的 E-mail 地址

在 JavaScript 中获取用户输入的 E-mail 地址可以使用 getElementById 函数，该函数可以根据 HTML 元素的 id 属性获取相应的元素，然后可以通过该元素的 value 属性获取用户输入的值。

以下是一个示例代码，假设我们的 HTML 中有一个 <input> 元素，其 id 属性为 email，那么我们可以通过下面的代码获取用户输入的 E-mail 地址：

var emailInput = document.getElementById('email');
var email = emailInput.value;

步骤二：编写正则表达式进行验证

在获取用户输入的 E-mail 地址之后，我们需要对其进行验证。这里我们可以使用正则表达式来判断 E-mail 地址的格式是否正确。

以下是一个正则表达式示例，它可以验证 E-mail 地址的格式是否正确：

var emailRegex = /^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

在上述正则表达式中，^ 表示匹配字符串的开头，$ 表示匹配字符串的结尾。中间的 [a-zA-Z0-9.-]+ 表示匹配包含字母、数字、点号（.）和连字符（-）的任意长度字符串。@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4} 表示匹配一个 @ 符号后面跟着一个包含字母、数字、点号和连字符的任意长度字符串，再跟着一个以 2 到 4 个字母为后缀的字符串。

步骤三：使用正则表达式进行验证

在编写好正则表达式之后，我们需要将其与用户输入的 E-mail 地址进行比较，并判断其是否匹配。这里我们可以使用 JavaScript 中的 test 函数来进行检测。

以下是一个示例代码，假设我们已经获取用户输入的 E-mail 地址，并存储在了 email 变量中，那么我们可以通过下面的代码使用正则表达式进行验证：

if (emailRegex.test(email)) {
  alert('E-mail 验证通过！');
} else {
  alert('E-mail 格式错误，请重新输入！');
}

在上述代码中，test 函数会返回一个布尔值，如果用户输入的 E-mail 地址与正则表达式匹配，则 test 函数返回 true，否则返回 false。

示例说明一

下面是一个完整的表单验证函数，该函数可以验证表单中的 E-mail 地址是否符合要求，如果验证通过，则提交表单，否则提示用户重新输入。

<form id="myForm" onsubmit="return validateForm()">
  <label for="email">E-mail:</label>
  <input type="text" id="email" name="email">
  <button type="submit">提交</button>
</form>
<script>
  function validateForm() {
    var emailInput = document.getElementById('email');
    var email = emailInput.value;

    var emailRegex = /^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (emailRegex.test(email)) {
      return true;
    } else {
      alert('E-mail 格式错误，请重新输入！');
      return false;
    }
  }
</script>

在上述示例中，我们在表单的 onsubmit 事件中调用了 validateForm 函数来进行表单验证。如果验证通过，则函数返回 true，表单可以提交；否则函数返回 false，表单不能提交并提示用户重新输入。

示例说明二

下面是另一个示例，该示例使用了 jQuery 中的 submit 方法，在用户提交表单之前进行了 E-mail 验证。

<form id="myForm">
  <label for="email">E-mail:</label>
  <input type="text" id="email" name="email">
  <button type="submit">提交</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('#myForm').submit(function() {
    var email = $('#email').val();

    var emailRegex = /^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

    if (emailRegex.test(email)) {
      return true;
    } else {
      alert('E-mail 格式错误，请重新输入！');
      return false;
    }
  });
</script>

在上述示例中，我们使用了 jQuery 的 submit 方法来监听表单的 submit 事件，在事件处理函数中进行了 E-mail 验证。如果验证通过，则函数返回 true，表单可以提交；否则函数返回 false，表单不能提交并提示用户重新输入。

总结：

在本文中，我们介绍了如何使用 JavaScript 进行 E-mail 验证。通过获取用户输入的 E-mail 地址、编写正则表达式、使用正则表达式进行验证，我们可以有效地保证用户输入的 E-mail 地址格式正确。