如何实现用户输入匹配邮箱后才显示删除账号按钮

个人资料更新表单需实现删除账号交互逻辑：删除按钮默认隐藏，仅当用户在验证输入框中输入的内容与当前账号绑定邮箱完全匹配时，才显示删除按钮。

• 仅处理了邮箱匹配时显示按钮的逻辑，当用户修改输入导致内容不匹配时，不会重新隐藏按钮
• 未对输入内容做首尾空格过滤，用户误输入前后空格会导致匹配失效
• 直接取禁用输入框的placeholder作为绑定邮箱取值源，后续若调整placeholder文案会直接导致功能异常

JS逻辑 #

$(document).ready(function() {
  // 优先从元素自定义属性取绑定邮箱，无自定义属性时降级取placeholder，统一做去空格、转小写处理
  const $bindEmailEl = $('input[name="emp_email"]');
  const userEmail = ($bindEmailEl.data('bind-email') || $bindEmailEl.attr('placeholder')).trim().toLowerCase();
  const $deleteBtn = $(".del_acount");

  $(".email-pass-delete").on("input", function() {
    const inputEmail = $(this).val().trim().toLowerCase();
    // 匹配时显示按钮，不匹配时隐藏按钮
    inputEmail === userEmail 
      ? $deleteBtn.removeClass("hide_del_button")
      : $deleteBtn.addClass("hide_del_button");
  });
});

样式代码 #

.hide_del_button {
  display: none;
}

HTML结构 #

<!-- 新增data-bind-email属性存储真实绑定邮箱，避免依赖placeholder -->
<input 
  type="text" 
  disabled 
  placeholder="testemail@gmail.com"
  data-bind-email="testemail@gmail.com"
  name="emp_email" 
  class="form-control"
>

<input 
  type="text" 
  placeholder="如果要删除账号，请输入您的绑定邮箱" 
  value="" 
  name="email_pass" 
  class="form-control email-pass-delete"
>

<input 
  type="button" 
  value="删除账号" 
  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>

• 前端的显示隐藏仅做交互体验优化，真正执行删除账号的接口必须二次校验邮箱匹配逻辑，不能依赖前端传参判断
• 邮箱比对统一转小写，避免因为大小写问题导致匹配失败（邮箱协议本身不区分大小写）

内容的提问来源于stack exchange，提问作者flytomoon777