jQuery邮箱确认字段匹配校验失效：表单可提交无错误提示

直接上可运行的解决方案，核心是利用HTML5表单校验的setCustomValidity方法，结合jQuery监听事件实现匹配校验、错误提示和阻止提交。

完整代码示例 #

HTML结构 #

<form id="emailForm">
  <div class="form-group">
    <label for="email">邮箱地址</label>
    <input type="email" id="email" name="email" required placeholder="请输入邮箱">
    <span class="error-tip"></span>
  </div>
  <div class="form-group">
    <label for="confirmEmail">确认邮箱</label>
    <input type="email" id="confirmEmail" name="confirmEmail" required placeholder="请再次输入邮箱">
    <span class="error-tip"></span>
  </div>
  <button type="submit">提交表单</button>
</form>

基础样式（可选） #

.form-group {
  margin: 15px 0;
}
.error-tip {
  display: block;
  color: #dc3545;
  font-size: 14px;
  margin-top: 5px;
}

jQuery逻辑 #

$(function() {
  // 表单提交时的最终校验
  $('#emailForm').submit(function(e) {
    const emailVal = $('#email').val().trim();
    const confirmVal = $('#confirmEmail').val().trim();
    const confirmInput = $('#confirmEmail')[0]; // 必须取原生DOM元素
    const errorTip = $('#confirmEmail').next('.error-tip');

    // 先清空之前的错误状态
    confirmInput.setCustomValidity('');
    errorTip.text('');

    // 校验邮箱匹配
    if (emailVal !== confirmVal) {
      // 设置自定义错误提示，标记字段为无效
      confirmInput.setCustomValidity('两次输入的邮箱不匹配');
      // 显示自定义错误文本
      errorTip.text('两次输入的邮箱不匹配');
      // 阻止表单提交
      e.preventDefault();
      return;
    }
  });

  // 实时输入校验（提升用户体验）
  $('#confirmEmail').on('input blur', function() {
    const emailVal = $('#email').val().trim();
    const currentVal = $(this).val().trim();
    const inputEl = this;
    const errorTip = $(this).next('.error-tip');

    inputEl.setCustomValidity('');
    errorTip.text('');

    // 只有当确认框有内容且和邮箱不匹配时才提示
    if (currentVal && emailVal !== currentVal) {
      inputEl.setCustomValidity('两次输入的邮箱不匹配');
      errorTip.text('两次输入的邮箱不匹配');
    }
  });
});

关键要点说明 #

• 必须使用原生DOM元素调用setCustomValidity：这个方法是HTML原生输入框的API，jQuery包装后的对象不能直接调用，所以要用[0]取出原生元素。
• 每次校验前清空错误状态：避免上次的错误提示残留，确保校验逻辑的准确性。
• 阻止默认提交行为：当邮箱不匹配时，调用e.preventDefault()阻止表单提交，同时标记字段为无效状态，浏览器会自动识别这个无效状态（比如输入框边框变红，hover时显示自定义提示）。
• 实时校验优化体验：监听input和blur事件，用户输入或离开输入框时就触发校验，不用等提交才提示错误。

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