使用jquery-form-validator验证Datepicker日期格式失效，该如何解决？

先帮你梳理下当前代码里的几个关键问题，这些都是导致验证没触发的核心原因：

1. 字段名不匹配：你在验证规则里写的是针对from_datepicker的，但你的输入框name是to_date、id是to_datepicker，规则根本没绑定到目标输入框上；
2. 插件混淆：你提到安装的是jquery-form-validator，但代码里用的$(form).validate()是jQuery Validation Plugin的方法，这两个是完全不同的插件，不能混用；
3. Datepicker格式与验证格式冲突：Datepicker的输出格式是dd.mm.yy，但你要求验证的是yyyy-mm-dd，就算输入合法日期，格式不对也会触发错误，更别说非法输入了；
4. 未手动触发验证：输入框内容变更时直接提交表单，没先触发验证流程，插件根本没机会检查输入是否合法。

下面分两种情况给出解决方案，你可以根据实际使用的插件选择：

情况1：确实使用jquery-form-validator插件 #

这个插件的正确初始化方式是调用$.validate()，而非$(form).validate()，修正后的代码如下：

HTML部分 #

<form id="filter-form" action="my action" method="get"> 
  <input type="text" name="to_date" id="to_datepicker" 
         data-validation="date" 
         data-validation-format="yyyy-mm-dd"
         placeholder="请输入yyyy-mm-dd格式的日期">
</form>

JavaScript部分 #

$(document).ready(function() {
  // 初始化jquery-form-validator插件
  $.validate({
    form: '#filter-form',
    // 验证失败时阻止表单提交
    onError: function() {
      return false;
    },
    // 自定义错误提示
    messages: {
      date: "请输入符合格式的日期（yyyy-mm-dd）"
    }
  });

  // 初始化Datepicker，直接对齐验证格式
  $('#to_datepicker').datepicker({
    dateFormat: 'yy-mm-dd', // 输出格式与验证格式一致
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    // 选择日期后手动触发验证
    onSelect: function(dateText) {
      $(this).trigger('validate');
    }
  });

  // 输入内容变更时，先验证再提交
  $('#to_datepicker').on('change', function () {
    // 检查表单是否验证通过
    if ($('#filter-form').isValid()) {
      $('#filter-form').submit();
    }
  });
})

情况2：实际使用的是jQuery Validation Plugin（代码里用了validate()） #

如果是这种情况，需要修正规则绑定、使用精准的日期验证规则，代码如下：

HTML部分 #

<form id="filter-form" action="my action" method="get"> 
  <input type="text" name="to_date" id="to_datepicker">
</form>

JavaScript部分 #

$(document).ready(function() {
  var filterForm = $('#filter-form');
  
  // 初始化jQuery Validation
  filterForm.validate({
    rules: {
      to_date: { // 必须对应输入框的name属性值，不是id
        required: true,
        dateISO: true // 专门验证yyyy-mm-dd格式的日期规则
      }
    },
    messages: {
      to_date: {
        dateISO: "请输入yyyy-mm-dd格式的有效日期"
      }
    },
    // 验证通过后再提交
    submitHandler: function(form) {
      form.submit();
    }
  });

  $('#to_datepicker').datepicker({
    dateFormat: 'yy-mm-dd', // 对齐验证格式
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    // 选择日期后触发验证
    onSelect: function() {
      $(this).valid();
    }
  });

  // 输入变更时先验证再提交
  $('#to_datepicker').on('change', function () {
    if ($(this).valid()) {
      filterForm.submit();
    }
  });
})

几个关键注意点 #

• 字段名绑定：所有验证规则的键必须对应输入框的name属性，而不是id，这是表单验证插件的通用规则；
• 格式对齐：尽量让Datepicker的输出格式和验证格式保持一致，避免额外的格式转换工作；
• 手动触发验证：无论是选择日期还是手动输入，都要触发验证流程，插件才会检查输入合法性；
• 插件一致性：不要混用不同验证插件的方法，确认自己安装和引入的是哪个插件，再对应使用正确的API。

内容的提问来源于stack exchange，提问作者shuba.ivan