如何让jQuery Validation Plugin在失焦时验证必填空字段？

默认情况下，这个插件对必填字段的验证触发逻辑是：只有当用户输入过内容再清空，或者提交表单时，才会弹出必填错误提示。但你想要的「聚焦必填框后未输入任何内容就失焦，立即显示错误」完全可以通过自定义插件的回调事件实现，下面给你两种简单可靠的方案：

方案一：自定义onfocusout回调（推荐） #

直接在初始化验证时覆盖默认的onfocusout行为，强制对所有必填字段在失焦时执行验证：

$("#your-form-id").validate({
  // 自定义失焦时的验证逻辑
  onfocusout: function(element) {
    // 判断当前字段是否是必填项
    if ($(element).hasClass("required") || this.settings.rules[element.name]?.required) {
      // 强制验证当前字段
      this.element(element);
    } else {
      // 非必填字段沿用插件默认的失焦验证逻辑
      this.defaults.onfocusout.call(this, element);
    }
  },
  // 你的表单验证规则
  rules: {
    username: {
      required: true
    },
    email: {
      required: true,
      email: true
    }
  },
  // 自定义错误提示文本
  messages: {
    username: "请输入用户名",
    email: "请输入有效的邮箱地址"
  }
});

这个方案的好处是完全集成在插件的初始化配置里，不需要额外绑定独立的事件，逻辑更统一。

方案二：手动绑定focusout事件 #

如果觉得自定义回调太复杂，也可以直接给所有必填输入框绑定失焦事件，手动触发验证：

// 先初始化表单验证
$("#your-form-id").validate({
  rules: {
    username: { required: true },
    email: { required: true, email: true }
  },
  messages: {
    username: "请输入用户名",
    email: "请输入有效的邮箱地址"
  }
});

// 给所有必填输入框绑定失焦事件，触发验证
$("input[required], input.required").on("focusout", function() {
  $("#your-form-id").validate().element(this);
});

注意事项 #

• 确保你的jQuery和Validation Plugin版本是较新的（建议使用v1.19+版本），旧版本可能存在逻辑差异；
• 如果你的必填字段是通过data-rule-required="true"这种HTML属性设置的，方案一中的$(element).hasClass("required")可能需要调整为$(element).attr("data-rule-required") === "true"来判断；
• 两种方案都可以实现你要的效果，选自己觉得更易维护的即可。

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