使用 jQuery 实现用户输入邮箱验证后显示按钮-html教程-PHP中文网

使用 jQuery 实现用户输入邮箱验证后显示按钮

DDD

发布： 2025-10-05 16:03:33

原创

962人浏览过

使用 jquery 实现用户输入邮箱验证后显示按钮

本文介绍了如何使用 jQuery 实现一个用户界面功能：仅当用户在输入框中输入正确的邮箱地址时，才显示“删除账户”按钮。通过监听输入框的输入事件，并比较用户输入与预设邮箱地址，动态控制按钮的显示与隐藏，从而提升用户体验和安全性。

需求分析

我们需要实现以下功能：

页面加载时，“删除账户”按钮默认隐藏。
用户在一个输入框中输入邮箱地址。
当用户输入的邮箱地址与预设的邮箱地址相同时，“删除账户”按钮显示。
如果用户输入的邮箱地址与预设的邮箱地址不同，“删除账户”按钮隐藏。

实现步骤

HTML 结构

首先，我们需要在 HTML 中创建必要的元素：一个只读的显示用户邮箱的输入框，一个让用户输入邮箱的输入框，以及一个“删除账户”按钮。
```
<input type="text" disabled="" placeholder="[email protected]" name="emp_email" class="form-control">

<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">

<input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
登录后复制
注意：
- emp_email 输入框用于显示用户的邮箱，disabled 属性使其不可编辑。
- email_pass 输入框是用户输入邮箱的地方，其 class 为 email-pass-delete，稍后我们将用 jQuery 监听它的输入事件。
- del_acount 按钮是“删除账户”按钮，其 class 为 del_acount，并且初始状态下拥有 hide_del_button class，使其隐藏。
- 引入 jQuery 库是必须的。
CSS 样式

AssemblyAI
转录和理解语音的AI模型

65

查看详情

我们需要一个 CSS class hide_del_button 来隐藏“删除账户”按钮。
```
.hide_del_button {
  display: none;
}
```
登录后复制
jQuery 代码

使用 jQuery 监听 email-pass-delete 输入框的 input 事件，并在事件处理函数中比较用户输入与预设邮箱地址。
```
$(document).ready(function() {
  var user_email = $('input[name="emp_email"]').attr('placeholder');

  $(".email-pass-delete").on("input", function() {
    var current_email = $('.email-pass-delete').val();

    if (user_email == current_email) {
      $(".del_acount").removeClass("hide_del_button");
    } else {
      $(".del_acount").addClass("hide_del_button");
    }
  });
});
```
登录后复制
代码解释：
- $(document).ready(function() { ... }); 确保在 DOM 加载完成后执行代码。
- var user_email = $('input[name="emp_email"]').attr('placeholder'); 获取 emp_email 输入框的 placeholder 属性值，作为预设的邮箱地址。
- $(".email-pass-delete").on("input", function() { ... }); 监听 email-pass-delete 输入框的 input 事件。input 事件在每次输入框的值发生变化时触发。
- var current_email = $('.email-pass-delete').val(); 获取用户在 email-pass-delete 输入框中输入的值。
- if (user_email == current_email) { ... } else { ... } 比较用户输入与预设邮箱地址。如果相同，则移除 del_acount 按钮的 hide_del_button class，使其显示；否则，添加 hide_del_button class，使其隐藏。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Show Button on Email Input</title>
  <style>
    .hide_del_button {
      display: none;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

  <input type="text" disabled="" placeholder="[email protected]" name="emp_email" class="form-control">

  <input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">

  <input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">

  <script>
    $(document).ready(function() {
      var user_email = $('input[name="emp_email"]').attr('placeholder');

      $(".email-pass-delete").on("input", function() {
        var current_email = $('.email-pass-delete').val();

        if (user_email == current_email) {
          $(".del_acount").removeClass("hide_del_button");
        } else {
          $(".del_acount").addClass("hide_del_button");
        }
      });
    });
  </script>

</body>
</html>

登录后复制