Question

我有一个输入字段，用户可以在日期范围之间插入日期。

所以我在JQuery验证器对象上添加了一个新方法：

$.validator.addMethod("dateRange", function(value, element, from, to){
    try {
        var date = new Date(value);
        if(date >= from && date <= to)
            return true;
    } catch(e) {
    }
    return false;
}

然后我添加了一个新的类规则：

$.validator.addClassRules({
    myDateFieldRangeValidate: {
        dateRange: {fromDate, toDate}
    }
});

最后我将课程添加到输入中：

$("#myField").addClass("myDateFieldRangeValidate");

那么，我怎样才能将两个日期传递给验证函数？

更新：添加了代码段

＆＃13;

$.validator.addMethod("dateRange", function(value, element, from, to){
    try {
        var date = new Date(value);
        if(date >= from && date <= to)
            return true;
    } catch(e) {
    }
    return false;
});

var fromDate = new Date("2017-02-01");
var toDate = new Date("2017-12-31");

$.validator.addClassRules({
    myDateFieldRangeValidate: {
        dateRange: {fromDate, toDate}
    }
});

$("#myField").addClass("myDateFieldRangeValidate");

$("#btnValidate").click(function(){
  $("#frm1").validate();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form id="frm1">
  Date <input type="text" id="myField">
  <input type="button" id="btnValidate" value="Validate">
</form>

＆＃13;

Answer 1

感谢Arun P Johny，我在这里发布了他的小提琴：

$.validator.addMethod("dateRange", function(value, element, params) {
  try {
    var date = new Date(value);
    if (date >= params.from && date <= params.to) {
      return true;
    }
  } catch (e) {}
  return false;
}, 'message');

var fromDate = new Date("2017-02-01");
var toDate = new Date("2017-12-31");

$.validator.addClassRules({
  myDateFieldRangeValidate: {
    dateRange: {
      from: fromDate,
      to: toDate
    }
  }
});

$("#myField").addClass("myDateFieldRangeValidate");
$("#frm1").validate();
$("#btnValidate").click(function() {
  console.log($("#frm1").valid())
});

jQuery(function($) {
  var validator = $('#myform').validate({
    rules: {},
    messages: {}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<form id="frm1">
  Date
  <input type="text" id="myField" value="16 Feb 2017">
  <input type="button" id="btnValidate" value="Validate">
</form>

Answer 2

这是一种让jQuery验证器使用该功能来提供开始日期和结束日期的方法

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script>
<script>
$( document ).ready(function() {
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
    var startDate= new Date(jQuery(element)[0].attributes['data-rule-startDate'].value);
    var endDate= new Date(jQuery(element)[0].attributes['data-rule-endDate'].value);
    var d = new Date(value);
    console.log(d)
    return (d.getTime() <= endDate.getTime() && d.getTime() >= startDate.getTime())
}, "Please enter a valid date."
);



$('#frm1').validate();



});
</script>
<html>
<form id="frm1">
  Date <input type="text" id="myField" name="myField" data-rule-optdate="true" data-rule-startDate="2017-12-12" data-rule-endDate="2018-12-12">
</form>
</html>

JQuery验证日期范围

2 个答案: