如何实现修改密码时两次输入新密码一致后才允许提交操作？

修改方案 #

步骤1：更新HTML提示区域 #

在现有<div id="message">的密码规则列表末尾，新增密码匹配校验的提示项：

<div id="message">
  <h3>A senha deve conter o seguinte:</h3>
  <p id="letter" class="invalid">A <b>letra </b> minúscula</p>
  <p id="capital" class="invalid">A <b>letra </b> maiúscula</p>
  <p id="number" class="invalid">O <b>número</b></p>
  <p id="caracter" class="invalid">O <b>Caracter</b> especial</p>
  <p id="length" class="invalid">Minimo <b>8 caracteres</b></p>
  <!-- 新增以下行 -->
  <p id="match" class="invalid">两次<b>密码输入一致</b></p>
</div>

步骤2：补充JS校验逻辑 #

在现有JS代码末尾追加以下代码，实现密码匹配校验、表单提交拦截逻辑：

// 获取确认密码输入框、匹配提示、表单DOM
var confirmInput = document.getElementById("senhaconfir");
var matchTip = document.getElementById("match");
var form = document.querySelector('.alteracao-signin');

// 封装密码匹配校验函数
function validatePasswordMatch() {
  if (myInput.value === confirmInput.value && confirmInput.value.length > 0) {
    matchTip.classList.remove("invalid");
    matchTip.classList.add("valid");
    return true;
  } else {
    matchTip.classList.remove("valid");
    matchTip.classList.add("invalid");
    return false;
  }
}

// 新密码、确认密码输入时都触发匹配校验
myInput.addEventListener('keyup', validatePasswordMatch);
confirmInput.addEventListener('keyup', validatePasswordMatch);

// 确认密码聚焦时也显示规则提示
confirmInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}

// 拦截表单提交事件
form.addEventListener('submit', function(e) {
  // 校验所有规则是否都通过
  const allValid = document.querySelectorAll('#message .invalid').length === 0;
  if (!allValid) {
    e.preventDefault(); // 阻止默认提交行为
    // 用已引入的SweetAlert2弹出错误提示
    Swal.fire({
      icon: 'error',
      title: '校验不通过',
      text: '请检查密码是否符合复杂度要求，且两次输入的新密码一致'
    })
  }
  // 若你原有自定义提交函数inserir_senha，可在此处allValid为true的分支内调用即可
})

效果说明 #

修改完成后：

• 用户输入新密码和确认密码时会实时校验是否一致，在提示区同步显示状态
• 只要存在任意一项校验不通过（复杂度不符合/两次密码不一致），提交表单时会直接拦截，弹出错误提示，不会执行提交操作

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