如何编写jQuery Validator的greaterThan自定义规则验证配置？

你的配置错误点 #

你之前写的rules格式完全不对，greaterThan这个自定义方法需要的是目标字段的选择器作为参数，而不是true或者额外的value属性。

正确的规则配置写法 #

直接把startdate字段的选择器（比如#startdate，要和你的字段id对应）传给greaterThan：

$("#你的表单ID").validate({
  rules: {
    enddate: {
      greaterThan: "#startdate" // 这里填startdate字段的选择器，比如id选择器或name选择器
    }
  },
  // 可选：自定义错误提示语
  messages: {
    enddate: {
      greaterThan: "结束日期必须晚于开始日期"
    }
  }
});

关键细节说明 #

• 参数逻辑：原greaterThan方法里的param就是你传入的选择器，方法内部通过$(param)获取到startdate的DOM元素，拿到它的值做比较。
• 日期格式坑：如果你的jQuery UI Datepicker用的是mm/dd/yyyy这类格式，直接用字符串比较value > target.val()会出错（比如10/01/2024和09/30/2024字符串比较会认为前者小）。这种情况要修改greaterThan方法，把日期转成Date对象再比较：

$.validator.addMethod("greaterThan", function(value, element, param) {
  var target = $(param);
  if (this.settings.onfocusout && target.not(".validate-greaterThan-blur").length) {
    target.addClass("validate-greaterThan-blur").on("blur.validate-greaterThan", function() {
      $(element).valid();
    });
  }
  // 转成Date对象做时间比较，避免格式问题
  const start = new Date(target.val());
  const end = new Date(value);
  return end > start;
}, "结束日期必须晚于开始日期");

• 字段对应关系：rules里的enddate和startdate必须是表单字段的name属性值，不是id（如果name和id一致就不用管）。

完整可运行示例 #

假设你的表单结构是这样：

<form id="date-form">
  <label>开始日期：<input type="text" name="startdate" id="startdate" class="datepicker"></label>
  <label>结束日期：<input type="text" name="enddate" id="enddate" class="datepicker"></label>
  <button type="submit">提交</button>
</form>

对应的JS代码：

// 初始化jQuery UI Datepicker，推荐用yy-mm-dd格式，字符串比较也能正常工作
$(".datepicker").datepicker({
  dateFormat: "yy-mm-dd"
});

// 注册自定义验证方法
$.validator.addMethod("greaterThan", function(value, element, param) {
  var target = $(param);
  if (this.settings.onfocusout && target.not(".validate-greaterThan-blur").length) {
    target.addClass("validate-greaterThan-blur").on("blur.validate-greaterThan", function() {
      $(element).valid();
    });
  }
  // 转Date对象比较，兼容更多日期格式
  const startDate = new Date(target.val());
  const endDate = new Date(value);
  return endDate > startDate;
}, "结束日期必须晚于开始日期");

// 初始化表单验证
$("#date-form").validate({
  rules: {
    enddate: {
      greaterThan: "#startdate"
    }
  }
});

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