如何在jQuery中验证Email Id

在jQuery中验证Email Id是一项非常有用的任务，可以确保用户输入的Email Id格式正确。下面是一个完整攻略，包括两个示例说明。

步骤1：创建HTML和CSS

首先，我们需要一个HTML和CSS以便在页面中显示一个输入框和一个按钮。下面是一个示例HTML和：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Email Validation Example</title>
  <style>
    input[type="email"] {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #fff;
      background-color: #007bff;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <form>
    <input type="email" name="email" placeholder="Enter your email">
    <button type="submit"="button">Submit</button>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

在这个示例中，我们创建了一个输入框和一个按钮。

步骤2：使用jQuery验证Email Id

接下来，我们需要使用jQuery验证Email Id。我们可以使用正则表达式来验证Email Id。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Email Validation Example</title>
  <style>
    input[type="email"] {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #fff;
      background-color: #007bff;
      border-radius: 5px;
    }
    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <form>
    <input type="email" name="email" placeholder="Enter your email">
    <button type="submit" class="button">Submit</button>
    <div class="error"></div>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("form").submit(function(event) {
        var email = $("input[name='email']").val();
        var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!pattern.test(email)) {
          $(".error").text("Please enter a valid email address.");
          event.preventDefault();
        }
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用正则表达式来验证Email Id。我们使用submit()方法来捕获表单提交事件，并使用val()方法获取输入框中的值。然后，我们使用正则表达式来验证Email Id是否有效。如果Email Id无效，我们使用text()方法在页面上显示错误消息，并使用preventDefault()方法阻止表单提交。

示例1：验证Email Id是否有效

下面是一个示例，演示如何验证Email Id是否有效：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Email Validation Example</title>
  <style>
    input[type="email"] {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
      font: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #fff;
      background-color: #007bff;
      border-radius: 5px;
    }
    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <form>
    <input type="email" name="email" placeholder="Enter your email">
    <button type="submit" class="button">Submit</button>
    <div class="error"></div>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("form").submit(function(event) {
        var email = $("input[name='email']").val();
        var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!pattern.test(email)) {
          $(".error").text("Please enter a valid email address.");
          event.preventDefault();
        } else {
          alert("Email Id is valid.");
        }
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用正则表达式来验证Email Id是否有效。如果Email Id无效，我们在页面上显示错误消息。如果Email Id有效，我们使用alert()方法在页面上显示成功消息。

示例2：使用自定义错误消息验证Email Id

下面是一个示例，演示如何使用自定义错误消息验证Email Id：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Email Validation Example</title>
  <style>
    input[type="email"] {
      display: block;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #fff;
      background-color: #007bff;
      border-radius: 5px;
    }
    .error {
      color: red;
      font-size: 14px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <form>
    <input type="email" name="email" placeholder="Enter your email">
    <button type="submit" class="button">Submit</button>
    <div class="error"></div>
  </form>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $("form").submit(function(event) {
        var email = $("input[name='email']").val();
        var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!pattern.test(email)) {
          $(".error").text("Please enter a valid email address.");
          event.preventDefault();
        } else {
          alert("Email Id is valid.");
        }
      });
      $("input[name='email']").on("invalid", function(event) {
        event.preventDefault();
        $(".error").text("Please enter a valid email address.");
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用正则表达式来验证Email Id是否有效。如果Email Id无效，我们在页面上显示定义错误消息。我们使用on()方法来捕获输入框的invalid事件，并使用preventDefault()方法阻止默认行为。然后，我们在页面上显示自定义错误消息。

综上所述，使用jQuery验证Email Id是一项非常有用的任务，可以确保用户输入的Email Id格式正确。我们可以使用正则表达式来验证Email Id。同时，我们还提供了两个示例，演示如何验证Email Id是否有效以及如何使用自定义错误消息验证Email Id。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在jQuery中验证Email Id - Python技术站

如何在jQuery中验证Email Id

如何在jQuery中验证Email Id

步骤1：创建HTML和CSS

步骤2：使用jQuery验证Email Id

示例1：验证Email Id是否有效

示例2：使用自定义错误消息验证Email Id

相关文章