Question

我到处寻找，但我找不到适合我的问题的好代码。我有一些输入字段，用户用来在线发送他们的请求。其中一个字段是日期字段，我想以某种方式以这种方式验证，只有当输入的日期介于今天和之前的8天之间时才允许。例如：如果今天是11月29日，他们将被允许仅进入11月21日至29日之间的日期并且当他们输入错误的日期时已经显示警报窗口他们将从小型日历中获取日期，但该部分已经解决，我只需要验证即可获得帮助。如果有人可以发布工作代码，我将非常感激。谢谢

Answer 1

使用jQuery UI DatePicker，下面的脚本：

    $(function() {
    var currentDate = new Date();
    var maxAllowedDate = new Date(currentDate);
    maxAllowedDate.setDate(currentDate.getDate() + 8);
    $( "#datepicker" ).datepicker({ 
        changeYear: true,
        minDate: '0',
        maxDate: '+7D',
    });
    $('#datepicker').change(function(){
     var enteredVal = new Date(this.value);
        if(enteredVal.getTime() < currentDate.getTime() || enteredVal.getTime() > maxAllowedDate.getTime()) {
            alert("invalid");
        } else {
            alert("valid");
        }
    });
});

和用户界面：

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

以下是jsFiddle演示：http://jsfiddle.net/pjkz7k0t/1/

Answer 2

既然你要求使用javascript，我会假设你想要一个javascript答案，而不是一个jQuery答案。

function isValidDate(checkDate) {
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) {
        // split checkDate into three pieces
        var strMM = checkDate.split('/')[0];
        var strDD = checkDate.split('/')[1];
        var strYYYY = checkDate.split('/')[2];

        // create new Date() object from split pieces
        var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

        // evaluate each piece of resulting date object against each corresponding piece of checkDate
        if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) {
            /* if you wish, add additional validation constraints here */
            return true; // all three pieces match exactly
        }
    }
    return false; // did not meet criteria for return true
}

此方法使用显式正则表达式来验证格式。

我没有创建精心测试每个部分的方法，而是使用这些部分构建一个新的Date（）对象，知道结果MIGHT与checkDate不匹配，并使用结果日期中的部分来测试传递给的每个部分的checkDate功能。如果所有三个部分匹配，则输入的日期有效。

例如：

'02 / 29/2014'返回false

'02 / 29/2012'返回true

'12 / 36/2014'返回false

'29 / 06/2014'返回false

代码是纯javascript，可以提高可移植性，并且此方法不会干扰或妨碍您选择使用的任何其他条件的额外验证（针对年份范围，或针对今天（）评估strCheckDate，或任何其他特定于您的约束具体应用）。

另一个优点是，此方法不仅可以确定传递给函数的内容是否可以用于创建有效日期，还可以确认输入的日期与可以创建的有效日期匹配（从而克服了javascript在创建日期时向前滚动“额外日期”。

这可以很容易地扩展到测试日期的各种配置，使用完全相同的逻辑，只需创建一个不同的正则表达式测试，并以不同方式拆分checkDate。

DD / MM / YYYY的正则表达式是相同的，但拆分看起来像这样：

        // split characters into three pieces
        var strDD = checkDate.split('/')[0];
        var strMM = checkDate.split('/')[1];
        var strYYYY = checkDate.split('/')[2];

或者对于YYYY / MM / DD，您可以使用正则表达式：

        /\d\d\d\d\/\d\d\/\d\d/.test(checkDate)

并且拆分看起来像这样：

        // split characters into three pieces
        var strYYYY = checkDate.split('/')[0];
        var strMM = checkDate.split('/')[1];
        var strDD = checkDate.split('/')[2];

这是一个高度可变形（且干净）的javascript代码，用于验证用户输入日期的目的，并且可以快速修改以扩展范围内有效日期的检查。

function isValidDateRange(checkDate,minDate,maxDate) {
    if(/\d\d\/\d\d\/\d\d\d\d/.test(checkDate)) {
        // split checkDate into three pieces
        var strMM = checkDate.split('/')[0];
        var strDD = checkDate.split('/')[1];
        var strYYYY = checkDate.split('/')[2];

        // create new Date() object from split pieces
        var strDateCheck = new Date(strYYYY,(strMM - 1),strDD); 

        // evaluate each piece of resulting date object against each corresponding piece of checkDate
        if(((strDateCheck.getMonth() + 1) == strMM) && (strDateCheck.getDate() == strDD) && (strDateCheck.getFullYear() == strYYYY)) {
            // if this code fires, you have a valid date entered, first logic hurdle passed
            // If you pass in minDate and maxDate as any format other than a date object, you should
            // create new Date(); from them before comparing.
            // Example:
            // var strMinMM = minDate.split('/')[0];
            // var strMinDD = minDate.split('/')[1];
            // var strMinYYYY = minDate.split('/')[2];
            // minDate = new Date(strMinYYYY,(strMinMM - 1),strMinDD);
            // var strMaxMM = maxDate.split('/')[0];
            // var strMaxDD = maxDate.split('/')[1];
            // var strMaxYYYY = maxDate.split('/')[2];
            // maxDate = new Date(strMaxYYYY,(strMaxMM - 1),strMaxDD);
            if((!strDateCheck < minDate) && (!strDateCheck > maxDate)) {
                return true; // all three pieces match exactly AND date is within specified range
            }
        }
    }
    return false; // did not meet criteria for return true
}

使用onsubmit验证日期输入字段

2 个答案: