JS表单取消确认仍提交、密码不匹配无法重输如何解决

你的代码存在3个核心逻辑错误，导致出现描述的故障：

• 密码校验逻辑失效：verificarPassword函数中仅修改了存储输入值的局部变量，没有实际操作DOM输入框清空内容，且函数没有返回明确的布尔值，外层校验判断无法正常识别密码是否匹配
• 确认弹窗逻辑失效：confirmarAlta函数没有返回用户选择的布尔结果，且在提交校验中被重复调用2次，第一次弹出确认框后不会阻断流程，第二次调用时无法拿到正确的选择结果，自然无法阻止表单提交
• 按钮类型错误："Limpiar campos"（清空字段）按钮的type被误写为submit，点击该按钮也会触发表单提交，不符合清空字段的功能预期

JavaScript部分 #

<script>
// 提交确认函数，直接返回用户选择结果
function confirmarAlta(){
  return confirm("Esta seguro que desea crear este usuario?");
}
</script>
<script>
// 密码校验函数，返回布尔值标识校验是否通过
function verificarPassword(){
  var passInput = document.querySelector(".password");
  var confirmPassInput = document.querySelector(".confirmPassword");
  var pass = passInput.value;
  var confirmPass = confirmPassInput.value;
  if(pass != confirmPass){
    // 实际清空输入框内容，方便用户重新输入
    passInput.value = "";
    confirmPassInput.value = "";
    alert("Las contraseñas no coinciden");
    return false;
  }
  return true;
}
</script>
<script>
function Validaciones(event) {
  // 密码校验不通过直接阻止提交
  if (!verificarPassword()) {
    event.preventDefault();
    return;
  }
  // 密码校验通过后弹确认框，用户选取消则阻止提交
  if(!confirmarAlta()){
    event.preventDefault();
  }
}
</script>

HTML部分 #

<form onSubmit="Validaciones(event)" method="post" action="ServletUsuarios">
  <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>
  <div class="col-12">
    <input  type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">
    <!-- 把清空按钮的type从submit改为button，避免误触发表单提交 -->
    <button type="button" class="btn btn-outline-info">Limpiar campos</button>
  </div>
</form>

• 密码不匹配时会直接清空两个输入框的实际值，光标可以直接定位到输入框重新输入，不会出现无法编辑的问题
• 所有校验函数都返回明确的布尔值，不会重复触发确认弹窗，用户在确认框点"取消"会直接阻断表单提交
• 清空按钮改为普通按钮类型，点击只会保留在当前页面，不会触发提交逻辑

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