如何用jQuery开发密码与确认密码校验功能？

嘿，这事儿不难，咱们直接上代码加讲解，保证你一看就会：

第一步：先搭好HTML结构 #

首先得有两个输入框（密码+确认密码），再加个用来显示错误提示的元素，比如这样：

<div class="form-group">
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
</div>
<div class="form-group">
  <label for="confirmPassword">确认密码:</label>
  <input type="password" id="confirmPassword" name="confirmPassword">
  <!-- 用来放错误提示的容器，默认隐藏 -->
  <span id="passwordError" style="color: red; display: none;">password and confirmpassword incorrect !</span>
</div>

第二步：写jQuery验证逻辑 #

接下来用jQuery监听输入框的输入事件，实时对比两个密码的值：

$(document).ready(function() {
  // 监听密码和确认密码的输入事件，确保修改任意一个都能触发验证
  $('#password, #confirmPassword').on('input', function() {
    const password = $('#password').val().trim();
    const confirmPassword = $('#confirmPassword').val().trim();
    const errorElement = $('#passwordError');

    // 只有当两个输入框都有内容，且不一致时才显示错误提示
    if (password !== '' && confirmPassword !== '' && password !== confirmPassword) {
      errorElement.show();
    } else {
      // 密码一致或者有输入框为空时，隐藏提示
      errorElement.hide();
    }
  });
});

关键细节说明 #

• 用input事件而非keyup，是因为它能捕获所有输入场景（比如鼠标粘贴、输入法选词输入），兼容性更全面
• 加.trim()是为了过滤掉用户不小心输入的前后空格，避免无意义的验证错误
• 错误提示默认隐藏，只有满足“双输入非空+密码不一致”的条件才显示，体验更友好

这样一来，用户在输入或修改密码的过程中，就能实时看到提示反馈，直到两个密码完全一致，提示就自动消失啦～

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