使用提交验证日期输入字段


Validating date input field with 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");
        }
    });
});

和用户界面:

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

这是jsFiddle演示: http://jsfiddle.net/pjkz7k0t/1/

既然你要求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 部分。如果所有三件都匹配,则输入的日期有效。

例如:

'02/29/2014' 返回假

'02/29/2012' 返回 true

'12/36/2014' 返回假

'29/06/2014' 返回假

该代码是纯 javascript,它提高了可移植性,并且此方法不会干扰或阻碍您选择使用的任何其他条件(针对年份范围,或根据 today(( 评估 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
}