如何在非侵入式表单验证中使用jQuery .defer/.done控制提交

我来帮你搞定这个Promise和表单验证的问题～首先得先揪出当前代码里的几个核心问题：

• 你的ValidateEditForm函数没有返回任何Promise对象，所以你定义的promise变量其实是undefined，调用promise.done()自然不会有任何效果
• 非侵入式验证可能还没触发（比如用户没修改过输入框，错误提示还没渲染出来），直接统计.field-validation-error可能会得到不准确的错误数

下面是调整后的完整解决方案：

步骤1：修改ValidateEditForm，让它返回Promise #

我们需要先手动触发表单的非侵入式验证，确保所有错误都被渲染出来，然后统计错误数，再通过Promise来传递结果：

function ValidateEditForm() {
  return new Promise((resolve, reject) => {
    // 手动触发jQuery非侵入式验证，确保所有错误提示都已生成
    const $form = $('#personEditForm');
    $form.validate(); // 初始化验证（如果还没初始化的话）
    const isFormValid = $form.valid(); // 触发验证并获取是否有效

    // 统计错误数（也可以直接用isFormValid来判断，更简洁）
    const $errors = $form.find(".field-validation-error span");
    const errorCnt = $errors.length;

    if (errorCnt <= 0 && isFormValid) {
      resolve(true); // 验证通过，resolve结果
    } else {
      reject(new Error(`发现${errorCnt}个验证错误`)); // 验证失败，reject错误信息
    }
  });
}

步骤2：调整表单提交事件的处理逻辑 #

现在我们可以用Promise的.then()和.catch()来控制后续流程，确保验证完成后再决定是否提交：

$(document).on('click', '.Save', function() { 
  $("#personEditForm").submit(); 
});

$(document).on("submit", "form", function(e) {
  e.preventDefault();
  
  // 调用验证函数，通过Promise处理后续
  ValidateEditForm()
    .then(() => {
      // 验证通过，执行提交逻辑
      alert("验证通过，准备提交");
      PostToServer();
    })
    .catch((error) => {
      // 验证失败，提示错误
      alert(error.message);
    });

  return false;
});

额外说明 #

• 如果你不需要统计具体错误数，直接用$form.valid()的返回值就足够判断表单是否通过验证，代码可以更简洁
• 如果你原来的ValidateEditForm里有异步操作（比如异步校验某个字段），Promise的写法也能完美适配，只需要把异步逻辑放在Promise内部，完成后再调用resolve或reject

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