Jquery-form-验证器在datepicker中验证格式日期

Question

我有带有日期选择器的表单和输入，当输入中更改数据时，我尝试验证格式日期(如"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。我该如何使用这个插件？

Answer 1

如果您想用jquery验证插件验证日期，那么请确保在head标记中包含了这个js文件。

当您使用其他方法时，需要这个js。

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

还要确保还包括了验证min文件，这是当您使用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"
       }
    }
   }
});

Answer 2

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

若要显示日期选择器：

把下面的代码放在你的头部标签中。

<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 >