jquery使用正则表达式验证email地址的方法

2023年6月10日下午9:18 • JavaScript

使用jQuery的正则表达式验证Email地址的方法可以通过以下步骤完成：

步骤1：编写HTML

首先，需要在HTML中创建一个表单，其中包含一个输入Email地址的文本框和一个提交按钮。例如：

<form id="email-form">
  <label for="email">Email地址:</label>
  <input type="email" id="email" name="email">
  <button type="submit">提交</button>
</form>

步骤2：添加jQuery并编写验证代码

在HTML文件中添加jQuery库，并且在提交按钮点击的时候执行验证代码。例如：

<!--添加jQuery库-->
<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>

<!--验证Email地址代码-->
<script>
  $(function() {
    $('#email-form').submit(function(event) {
      // 阻止表单的默认提交事件
      event.preventDefault();

      // 获取文本框输入的Email地址
      var email = $('#email').val();

      // 定义邮箱验证表达式，这里使用了W3C规定的邮箱地址正则表达式
      var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

      // 验证Email地址是否合法
      if (emailRegex.test(email)) {
        alert('邮箱地址合法！');
      } else {
        alert('邮箱地址不合法！');
      }
    });
  });
</script>

这段代码中，我们定义了一个表单提交事件处理函数，当用户点击提交按钮时会执行该函数。在函数中，我们使用jQuery获取了输入框中输入的Email地址，并定义了邮箱验证的正则表达式。最后，我们使用test()方法来应用该正则表达式，以判断Email地址是否合法，并弹出相应的提示信息。

示例1：验证用户输入的内容

<!DOCTYPE html>
<html>
<head>
  <title>jQuery正则表达式验证Email地址使用攻略</title>
  <!--添加jQuery库-->
  <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <form id="email-form">
    <label for="email">Email地址:</label>
    <input type="email" id="email" name="email">
    <button type="submit">提交</button>
  </form>

  <!--验证Email地址代码-->
  <script>
    $(function() {
      $('#email-form').submit(function(event) {
        // 阻止表单的默认提交事件
        event.preventDefault();

        // 获取文本框输入的Email地址
        var email = $('#email').val();

        // 定义邮箱验证表达式，这里使用了W3C规定的邮箱地址正则表达式
        var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        // 验证Email地址是否合法
        if (emailRegex.test(email)) {
          alert('邮箱地址合法！');
        } else {
          alert('邮箱地址不合法！');
        }
      });
    });
  </script>
</body>
</html>

示例2：使用html()方法显示检查结果

<!DOCTYPE html>
<html>
<head>
  <title>jQuery正则表达式验证Email地址使用攻略</title>
  <!--添加jQuery库-->
  <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <form id="email-form">
    <label for="email">Email地址:</label>
    <input type="email" id="email" name="email">
    <button type="submit">提交</button>
  </form>

  <div id="check-result"></div>

  <!--验证Email地址代码-->
  <script>
    $(function() {
      $('#email-form').submit(function(event) {
        // 阻止表单的默认提交事件
        event.preventDefault();

        // 获取文本框输入的Email地址
        var email = $('#email').val();

        // 定义邮箱验证表达式，这里使用了W3C规定的邮箱地址正则表达式
        var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        // 验证Email地址是否合法
        if (emailRegex.test(email)) {
          $('#check-result').html('邮箱地址合法！');
        } else {
          $('#check-result').html('邮箱地址不合法！');
        }
      });
    });
  </script>
</body>
</html>

在这个示例中，我们添加了一个div元素，用于显示验证的结果。我们可以利用jQuery的html()方法来实现这一功能。当Email地址合法时，我们将文字“邮箱地址合法！”显示在div元素中。否则，我们将文字“邮箱地址不合法！”显示在div元素中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery使用正则表达式验证email地址的方法 - Python技术站