Jquery-form-validator 在 datepicker 中验证格式日期答案

【问题标题】：Jquery-form-validator validate format date in datepickerJquery-form-validator 在 datepicker 中验证格式日期
【发布时间】：2018-01-25 10:04:51
【问题描述】：

我有带有日期选择器输入的表单，当输入中的数据发生更改时，我尝试验证格式日期，如"yyyy-mm-dd"。我安装jquery-form-validator并这样写

<form id="filter-form" action="my action" method="get">
  <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy" data-validation-format="yyyy-mm-dd">
</form>

$(document).ready(function() {
  var filterForm = $('#filter-form');

  filterForm.validate({
    rules: {
      from_datepicker: {
        required: true,
        date: true
      }
    }
  });

  $('#to_datepicker').datepicker({
    dateFormat: 'dd.mm.yy',
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    showWeek: true
  });

$('.hasDatepicker').on('change', function () {
    filterForm.submit()
});

然后我尝试在输入中写入一些数据，例如11111，但没有调用jquery-form-validator。我如何使用这个插件？

【问题讨论】：

日期选择器是否显示？意味着当您单击输入字段时，至少它会显示日期选择器？
是的，我可以在日期选择器中放入一些数据，例如1111
这意味着你的 datepicker jquery 不工作，当你点击它时它应该显示 datepicker。检查我发布的答案。
不，当我点击输入时，日期选择器正在显示，但我可以键入另一种格式的日期，如 dd/mm/yy

标签： jquery forms validation datepicker

【解决方案1】：

如果您想使用 jquery 验证插件验证日期，请确保您已将此 js 文件包含在您的 head 标记中。

使用附加方法时需要这个js。

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

还要确保您还包含了验证最小文件，这是您使用 jquery 验证插件时必须的：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

另外，在您的代码中，我可以看到，您的元素名称是 to_date，并且在您的验证中，您输入了 from_datepicker。

所以，还要输入您要验证的名称。如果你想验证 to_date 那么你的验证码应该是：

var filterForm = $('#filter-form');
filterForm.validate({
    rules: {
      to_date: {
        required: true,
        date: true
     },
    messages:{
       to_date:{
         required: "Date is required",
         date:"enter date only"
       }
    }
   }
});

【讨论】：

我有控制台错误additional-methods.min.js:4 Uncaught TypeError: Cannot read property 'addMethod' of undefined
您是否包含此验证最小文件：cdn.jsdelivr.net/jquery.validation/1.16.0/…
我加了js/form-validator/jquery.form-validator.min.js
你能试试live js url吗？我在回答中提到了这两个网址。
确保先添加验证 min 文件，然后添加方法 js 文件。

【解决方案2】：

您不需要验证日期。将该输入字段设为只读。

显示日期选择器：

将下面的代码放在你的 head 标签内。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!--do not include this jquery min file if it is already there, otherwise it may conflict-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#to_datepicker" ).datepicker({
      dateFormat: 'dd-mm-yy',
      showAnim: "drop",
      changeMonth: true,
      changeYear: true,
      showWeek: true
  });
});
</script>

并将 readonly 属性与您的输入标签类似：

<input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy" data-validation-format="yyyy-mm-dd" readonly >

【讨论】：