首页 > 营销学院 > 技术知识

根据用户输入邮箱显示/隐藏按钮：jQuery 实现指南

根据用户输入邮箱显示/隐藏按钮：jquery 实现指南

本文将介绍如何使用 jQuery 实现一个常见的用户界面交互：仅当用户在指定输入框中输入正确的邮箱地址时，才显示某个按钮（例如“删除账户”按钮）。我们将提供完整的代码示例，并详细解释实现逻辑，帮助你理解并应用到自己的项目中，提升用户体验。

核心思路

实现这个功能的关键在于：

获取用户的邮箱地址: 从只读的输入框中获取用户的邮箱地址。
监听输入框的变化: 监听用户输入邮箱地址的输入框的 input 事件。
比较邮箱地址: 每次用户输入时，将输入的邮箱地址与用户的邮箱地址进行比较。
显示/隐藏按钮: 如果输入的邮箱地址与用户的邮箱地址一致，则显示按钮；否则，隐藏按钮。

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>

请注意，del_acount 按钮初始状态是隐藏的，这通过 hide_del_button 类来实现。

CSS 样式

为了隐藏按钮，我们需要定义 hide_del_button 类的样式：

.hide_del_button {
  display: none;
}

jQuery 代码

接下来，我们使用 jQuery 来实现核心逻辑：

CA.LA

第一款时尚产品在线设计平台，服装设计系统

86 查看详情 CA.LA

$(document).ready(function() {
  // 获取用户的邮箱地址
  var user_email = $('input[name="emp_email"]').attr('placeholder');

  // 监听输入框的 input 事件
  $(".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 属性值，并将其存储在 user_email 变量中。这里假设用户的邮箱地址显示在 placeholder 中。实际应用中，可能需要从后端获取，并赋值给 value 属性。
$(".email-pass-delete").on("input", function() { ... });：为 email-pass-delete 类名的输入框绑定 input 事件。当用户在该输入框中输入内容时，该函数将被执行。
var current_email = $('.email-pass-delete').val();：获取用户当前在 email-pass-delete 输入框中输入的值，并将其存储在 current_email 变量中。
if (user_email == current_email) { ... } else { ... }：比较 user_email 和 current_email 的值。
- 如果相等，则移除 del_acount 按钮的 hide_del_button 类，从而显示按钮。
- 如果不相等，则添加 hide_del_button 类，从而隐藏按钮。

关键改进:

原始代码缺少 else 语句，导致如果用户输入正确的邮箱地址后又修改为错误的，按钮仍然会显示。添加 else 语句后，可以确保按钮只在用户输入正确的邮箱地址时才显示。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Show Button on Email Match</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .hide_del_button {
      display: none;
    }
  </style>
</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>

注意事项

安全性： 这种方式仅用于简单的用户界面交互。在实际应用中，删除账户等敏感操作必须进行后端验证，以确保安全性。
用户体验： 可以添加一些提示信息，例如在输入框下方显示“邮箱地址不正确”等信息，以提升用户体验。
数据来源： 示例代码中，用户的邮箱地址是从 placeholder 属性中获取的。实际应用中，应该从后端获取，并赋值给 value 属性。
jQuery 版本： 本示例使用 jQuery 3.3.1。请确保你的项目中引入了 jQuery，并且版本兼容。

总结

通过本文，你学习了如何使用 jQuery 实现一个简单的用户界面交互：仅当用户在指定输入框中输入正确的邮箱地址时，才显示某个按钮。这个技术可以应用于各种场景，例如：

在用户确认邮箱地址后，才允许用户修改密码。
在用户输入正确的验证码后，才允许用户提交表单。
在用户同意服务条款后，才允许用户注册账户。

希望本文能够帮助你理解并应用 jQuery，提升用户体验。

以上就是根据用户输入邮箱显示/隐藏按钮：jQuery 实现指南的详细内容，更多请关注其它相关文章！

# 来实现 # 如何制作漫画网站推广 # 食用油的推广与营销策略 # 郴州网站建设详细策划 # 秦山街道网站建设 # 浙江省推广网站 # seo诊断s # 蓟县租房网站建设 # 哪家网站推广营销好点做 # 莆田视频矩阵营销推广合作 # 为网站设计seo关键字优化结构 # 在此 # 自己的 # 如何使用 # css # 实际应用 # 框中输入 # 输入框 # 邮箱地址 # 用户注册 # 邮箱 # cdn # ai # 后端 # ajax # js # html # jquery

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-05

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。