Javascript 正在使用onsubmit验证日期输入字段

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

---

感谢您使用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");
        }
    });
});

$（函数（）{
var currentDate=新日期（）；
var MaxAllowedate=新日期（当前日期）；
MaxAllowedate.setDate（currentDate.getDate（）+8）；
$（“#日期选择器”）。日期选择器（{
变化年：是的，
minDate:'0'，
maxDate:“+7D”，
});
$（'#datepicker'）。更改（函数（）{
var enteredVal=新日期（此.value）；
如果（enteredVal.getTime（）MaxAllowedate.getTime（））{
警报（“无效”）；
}否则{
警报（“有效”）；
}
});
});

以及用户界面：

<div class="demo">

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

日期：

---

这里是JSFIDLE演示：

既然您要求使用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（）对象，知道结果可能与checkDate不匹配，并使用结果日期中的片段来测试传递到函数中的checkDate片段。如果三件物品都匹配，则输入的日期有效

例如：

“2014年2月29日”返回错误

“2012年2月29日”返回true

“12/36/2014”返回错误

“2014年6月29日”返回错误

代码是纯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];

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

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

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

而分割将如下所示：

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

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

函数为有效日期（checkDate、minDate、maxDate）{
如果（/\d\d\/\d\d\/\d\d\d/.test（检查日期））{
//将支票日期拆分为三个部分
var strMM=checkDate.split（'/'）[0]；
var strDD=checkDate.split（'/'）[1]；
var stryyy=checkDate.split（'/'）[2]；
//从拆分的片段创建新的日期（）对象
var strDateCheck=新日期（strYYYY，（strMM-1），strDD）；
//根据每个对应的checkDate片段评估每个结果日期对象片段
如果（（（strDateCheck.getMonth（）+1）=strMM）和&（strDateCheck.getDate（）==strDD）和&（strDateCheck.getFullYear（）==strYYYY））{
//如果此代码触发，则输入了有效日期，第一个逻辑障碍已通过
//如果您将minDate和maxDate作为日期对象以外的任何格式传递，您应该
//在比较之前，从它们创建新日期（）。
//例如：
//var strMinMM=minDate.split（'/'）[0]；
//var strMinDD=minDate.split（'/'）[1]；
//var strminyyyyy=minDate.split（'/'）[2]；
//minDate=新日期（strMinYYYY，（strMinMM-1），strMinDD）；
//var strMaxMM=maxDate.split（'/'）[0]；
//var strMaxDD=maxDate.split（'/'）[1]；
//var strmaxyyy=maxDate.split（'/'）[2]；
//maxDate=新日期（strmaxyyy，（strMaxMM-1），strMaxDD）；
如果（（！strDateCheckmaxDate））{
return true；//三个部分完全匹配，日期在指定范围内
}
}
}
return false；//不符合返回true的条件
}

您可能应该使用矩，如果验证没有错误（例如，正确的日期）并且变量未写入（或未设置为true），则可以使用for（）-循环，然后写入变量您可以抛出一个错误。@Rafael实际上jQuery UI DP不会阻止任何人手动键入与实际允许日期不同的日期。Rome会，Rome验证查看@CharlotteDunois注释above@Shiala使用DatePicker设置允许的最小和最大日期范围，如果日期在8天之内，则无需验证日期。这实现了用户使用jQuery UI（而不是另一个插件库）所需的功能，并防止了无效的日期输入。谢谢IsabelHM…你给了我一个好主意和代码，但问题是，如果他们忽略了迷你日历，他们可以手动输入日期，即使无法从迷你日历中进行选择…我需要一些东西来明确阻止用户输入日期超出范围我向datepicker onChange事件添加了验证