onclick事件触发时密码校验函数失效，报confirmPassword未定义

抛出confirmPassword is not defined错误的直接原因是verificarPassword函数中使用了未声明的变量confirmPassword：你写的confirmPassword.querySelector(".confirmPassword")里，confirmPassword既不是提前获取的DOM对象，也不是内置变量，浏览器查找不到该变量就会抛出引用错误。

除此之外现有代码还有3个逻辑漏洞：

• 仅给存储输入值的局部变量pass、confirmPass赋空值，无法实际清空页面输入框的内容
• 密码校验不通过时没有阻止表单提交，提示后仍会正常提交表单
• 事件处理函数未显式接收event对象，部分浏览器环境下event.preventDefault()会失效

JS 逻辑 #

function confirmarAlta(event) {
  const submitConfirm = confirm("Esta seguro que desea crear este usuario?");
  if (!submitConfirm) {
    event.preventDefault();
    return false;
  }
  return true;
}

function verificarPassword(event) {
  // 统一通过document查找对应DOM元素
  const passInput = document.querySelector(".password");
  const confirmPassInput = document.querySelector(".confirmPassword");
  // 取值时去除首尾空格，避免空格导致的校验误判
  const pass = passInput.value.trim();
  const confirmPass = confirmPassInput.value.trim();

  if (pass !== confirmPass) {
    alert("Las contraseñas no coinciden");
    // 直接操作DOM元素清空输入框
    passInput.value = "";
    confirmPassInput.value = "";
    // 校验不通过阻止表单提交
    event.preventDefault();
    return false;
  }
  return true;
}

function Validaciones(event) {
  // 密码校验不通过时直接终止后续逻辑
  if (!verificarPassword(event)) return;
  confirmarAlta(event);
}

HTML 部分 #

<div class="form-group">
  <label>Contraseña: </label>
  <input type="password" class="form-control password" name="txtPassword" required>
</div>
<div class="form-group">
  <label>Repetir Contraseña: </label>
  <input type="password" class="form-control confirmPassword"  name="txtConfirmarPassword" required>
</div>

<!-- 显式把事件对象传入处理函数 -->
<input onclick="Validaciones(event)" type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">

• 删除了不存在的confirmPassword变量前缀，所有DOM查询统一走document.querySelector
• 单独保存两个密码输入框的DOM引用，清空内容时直接操作DOM的value属性，而非修改局部字符串变量
• 所有事件处理函数显式接收event参数，阻止提交时统一调用event.preventDefault()，兼容所有主流浏览器
• 调整执行逻辑：密码校验不通过时直接返回，不会弹出后续的提交确认框，交互逻辑更合理

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