javascript - 如何验证文本输入字段的接收日期，使其从今天算起在 4 到 8 周之间？

Question

我有几个输入字段。而且，我正在使用 jQuery 验证插件验证这些字段，可以从这里找到:https://jqueryvalidation.org/

我可以验证输入文本字段和接收日期值的输入文本字段。但是，我需要确保收到日期是从今天算起的 4 到 8 周之间。如何做到这一点？

HTML:

<form>
    Name: <input type="text" maxlength="50" class="nf-givenname"><br/> <br/> 
    date that does not work: 

    <input type="text" maxlength="45" class="nf-date-picker" name="Date">
    <br/> <br/> 

    <input type="submit" value="Submit" class="btn-save date"  commandtype="Save">
</form>

到目前为止，jQuery 代码对我来说如下:

$(document).ready(function() {
    var $form = $("form");
    $form.validate({
        submitHandler: function() {
            //
        }
    });

    // Ensures the classNames associated with the form elements can be used for validation
    $.validator.addClassRules = function(className, rules) {
        if (className.constructor === String) {
            var obj = {};
            obj[className] = rules;
            className = obj;
        }

        $.each(className, function(n, r) {
            $("." + n).each(function(i, e) {
                var self = $(e);
                self.rules("add", r);
            });
        });
    };

    $.validator.addMethod(
        "dateRange",
        function(value, element, params) {
            console.log("value is" + value);
            try {
                console.log(
                    "Entered value is" +
                        value +
                        " params.from  is" +
                        params.from +
                        " param to is" +
                        params.to
                );
                if (value > params.from && value < params.to) {
                    return true;
                }
            } catch (e) {}
            return false;
        },
        "Please enter date within range (4 to 8 weeks)"
    );

    var formattedDate = new Date()
            .toJSON()
            .slice(0, 10)
            .split("-")
            .reverse()
            .join("-"),
        dateTokens = formattedDate.split("-"),
        dt = new Date(dateTokens[2], parseInt(dateTokens[1], 10) - 1, dateTokens[0]), // months are 0 based, so need to add 1
        inFourWeeks = new Date(dt.getTime() + 28 * 24 * 60 * 60 * 1000)
            .toJSON()
            .slice(0, 10)
            .split("-")
            .reverse()
            .join("-"),
        inEightWeeks = new Date(dt.getTime() + 56 * 24 * 60 * 60 * 1000)
            .toJSON()
            .slice(0, 10)
            .split("-")
            .reverse()
            .join("-");

    var fromDate = inFourWeeks;
    var toDate = inEightWeeks;

    $(".nf-date-picker").addClass("myDateFieldRangeValidate");

    $.validator.addClassRules({
                myDateFieldRangeValidate: {
            dateRange: {
                from: fromDate,
                to: toDate
            }
        },

        "nf-givenname": {
            required: true,
            messages: {
                required: "Please specify your given (first) name"
            }
        },

        "nf-date-picker": {
            required: true,
            messages: {
                required: "Please choose a date"
            }
        }
    });
});

我创建了一支笔来展示我目前正在努力解决的问题。作品codepen链接如下:https://codepen.io/hellouniverse/pen/aGjoKw?editors=1012

Answer 1

问题是 messages 属性，addClassRules() 方法似乎不完全支持它。我不知道这对你来说是否是一个可行的选择，但我将你的规则对象保存到 var rules 并循环它以将类名设置为 name 属性.这样您就可以以默认方式添加规则。这是您的选择吗？

编辑:我为默认的date 检查添加了自定义验证方法。它验证输入的日期是否在 4 到 8 周的范围内。日期格式设置为 dd/mm/yyyy。这应该让你去...

var $form = $("form");
  
var rules = {
    "nf-givenname": {
		    required: true,
        messages: {
            required: "Please specify your given (first) name"
	      }
		},
		"nf-date-picker": {
			  required: true,
			  date: true
        //dateISO: true
		},
		"txt_dob": {
		    required: true
		}
};
  
$form.validate({
    submitHandler: function(form) {
        //
		}
});


// Date format is dd/mm/yyyy for the validation!
$.validator.methods.date = function(value, element) {
    var dates = {
        "today": new Date(),
        "four_weeks": new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 28)),
        "eight_weeks": new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 56))
    };
    
    
    for (var k in dates) {
        if (dates.hasOwnProperty(k)) {
            var dd = dates[k].getDate();
            var mm = dates[k].getMonth()+1;
            
            if (dd < 10) dd = '0' + dd;
            if (mm < 10) mm = '0' + mm;
           
            dates[k] = dd + '/' + mm + '/' + dates[k].getFullYear();
        }
    }

    var date_from = dates["four_weeks"].split("/");
    var date_to = dates["eight_weeks"].split("/");
    var val =  value.split("/");

    var from = new Date(
        date_from[2],
        parseInt(date_from[1])-1, date_from[0]
    );
    
    var to = new Date(
        date_to[2],
        parseInt(date_to[1])-1, date_to[0]
    );
    
    var check = new Date(
        val[2],
        parseInt(val[1])-1, val[0]
    );

    return this.optional(element) || (check > from && check < to);
}
  
//------ Only for this test to prevent snippet reload.
$form.on('submit', function(e){
    e.preventDefault();
});
//------ 
  
  
for (var k in rules) {
    if (rules.hasOwnProperty(k)) {
        $('.' + k).attr('name', k).rules('add', rules[k]);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<form>
	Name: 
  <input type="text" maxlength="50" class="nf-givenname">
  <br/> <br/> 
	date that does not work:
	<input type="text" maxlength="45" class="nf-date-picker hasDatepicker">
	<br/> <br/> 
	date that does  work: 
	<input type="text" class="txt_dob" name="loreumipsum" />
	
	<input type="submit" value="Submit" class="btn-save date"  commandtype="Save">
</form>