使用JavaScript解决输入正确旧密码时提示框未清除的问题

嘿，我猜你是在做密码修改的表单功能吧？遇到这种“错了弹提示，对了提示还挂着”的问题，大概率是你的blur事件逻辑只处理了错误情况，没管正确的场景～我给你拆解下可能的情况和解决办法：

情况1：你用的是浏览器原生的alert弹窗 #

如果是这种情况，先明确一个点：alert是需要用户手动点击确定才会消失的弹窗，不可能自动消失。那你说的“输入正确后提示框没消失”，大概率是代码逻辑写错了——比如不管密码对不对都触发了alert，或者把判断条件搞反了。

举个典型的错误代码例子：

const oldPwdInput = document.getElementById('old-password');
oldPwdInput.addEventListener('blur', async () => {
  const inputVal = oldPwdInput.value;
  // 假设这是你调用后端校验密码的函数
  const isPwdCorrect = await verifyOldPassword(inputVal);

  // 这里如果不小心把判断写反，就会出问题
  if (isPwdCorrect) {
    alert('旧密码不正确'); // 逻辑完全搞反了！
  }
});

修正方法：
确保只有密码错误的时候才调用alert，正确的时候啥也不用做（毕竟alert弹出来就得手动关，总不能正确的时候也弹个“密码正确”吧？）。仔细检查你的判断条件和接口返回值，别把对错搞反了。

情况2：你用的是页面内的提示元素（比如红色的错误文本） #

这种情况是最常见的——你只在密码错误的时候把提示显示出来，但密码正确的时候忘记把提示隐藏掉了！

给你个完整的修正示例：

<!-- 先搭好页面结构，默认把错误提示藏起来 -->
<div class="password-group">
  <label>旧密码</label>
  <input type="password" id="old-pwd">
  <span id="old-pwd-error" style="color: red; display: none;">旧密码不正确，请重新输入</span>
</div>

const oldPwdInput = document.getElementById('old-pwd');
const errorTip = document.getElementById('old-pwd-error');

oldPwdInput.addEventListener('blur', async () => {
  const inputVal = oldPwdInput.value;
  // 调用后端接口或者本地校验密码
  const isCorrect = await checkOldPassword(inputVal);

  if (!isCorrect) {
    errorTip.style.display = 'inline'; // 错误时显示提示
  } else {
    errorTip.style.display = 'none'; // 正确时必须隐藏提示！
  }
});

额外小建议 #

• 尽量别用alert做表单提示，用户体验真的不好，用页面内的文本提示会友好很多。
• 可以把校验逻辑绑定到input事件上，用户输入的时候实时校验，不用等失去焦点才提示，体验更佳。
• 校验密码的时候，记得不要把明文密码传给后端，最好前端先做哈希处理，或者后端用哈希值对比，保证安全。

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