DatePicker验证Jquery如何验证

Question

我有一个Datepicker，并且由于用户可能将无效字符写入文本框，因此我想进行Datepicker验证。

这是我的表格：

@using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{

@Html.TextBox("txtDate", txtDate, "{0:dd.MM.yyyy}", new { @class = "date", id = "txtDate" })
<input type="submit" id="btnSubmit" value="Getir" />

} 

第一个问题：我的日期类似于“ dd.MM.yyyy”，但是在此脚本代码中却类似于“ mm / dd / yyyy”。 如何格式化该脚本代码，例如“ dd.MM.yyyy”？

第二个问题：如果我的日期验证错误，如何禁用按钮单击提交？

这是脚本代码及其链接。

 $(function() {
    $('#btnSubmit').bind('click', function(){
        var txtVal =  $('#txtDate').val();
        if(isDate(txtVal))
            alert('Valid Date');
        else
            alert('Invalid Date');
    });

function isDate(txtDate)
{
    var currVal = txtDate;
    if(currVal == '')
        return false;

    var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/; //Declare Regex
    var dtArray = currVal.match(rxDatePattern); // is format OK?

    if (dtArray == null) 
        return false;

    //Checks for mm/dd/yyyy format.
    dtMonth = dtArray[1];
    dtDay= dtArray[3];
    dtYear = dtArray[5];        

    if (dtMonth < 1 || dtMonth > 12) 
        return false;
    else if (dtDay < 1 || dtDay> 31) 
        return false;
    else if ((dtMonth==4 || dtMonth==6 || dtMonth==9 || dtMonth==11) && dtDay ==31) 
        return false;
    else if (dtMonth == 2) 
    {
        var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
        if (dtDay> 29 || (dtDay ==29 && !isleap)) 
                return false;
    }
    return true;
}

});

Answer 1

对于第一个问题。 将脚本中的rxDatePattern变量更改为：

var rxDatePattern = /^(\d{1,2})(\.|-)(\d{1,2})(\.|-)(\d{4})$/; //Declare Regex

注意如何用点替换斜线。

然后，我建议您默认情况下禁用该按钮，并在日期字段文本框中输入有效日期时启用它。 所以我将$('#btnSubmit').bind('click')函数更改为：

$('#txtDate').on('keyup', function(){
    var txtVal =  $('#txtDate').val();
    if(isDate(txtVal))
        $('#btnSubmit').prop('disabled', false);
    else
        $('#btnSubmit').prop('disabled', true);
});

见jsFiddle

编辑：

不好，我误会了。 出于某种考虑，您要求使用mm.dd.yyyy格式。

但是我对原始代码进行了一些更改。 使用相同的html，我对jQuery进行了一些更改：

function isDate(txtDate)
{
    //Here comes one ugly, long and working regexp
    var rxDatePattern = /^(((0?[1-9]|[12]\d|3[01])\.(0?[13578]|1[02])\.((19|[2-9]\d)\d{2}))|((0?[1-9]|[12]\d|30)\.(0?[13456789]|1[012])\.((19|[2-9]\d)\d{2}))|((0?[1-9]|1\d|2[0-8])\.0?2\.((19|[2-9]\d)\d{2}))|(29\.0?2\.((1[6-9]|[2-9]\d)(0?[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/g;

    return txtDate.match(rxDatePattern); //Returns true iff. currval is a valid date
};
function validate_datePicker(){
    var txtVal =  $('#txtDate').val();
    if(isDate(txtVal))
        $('#btnSubmit').prop('disabled', false);        
    else
        $('#btnSubmit').prop('disabled', true);
};
$(document).ready(function() {
    $('#txtDate').on('keyup', function(){
        validate_datePicker();
    });
    validate_datePicker();
});

签出新的jsFiddle

正则表达式评估给定日期字符串是否为日期。 请注意，日期为08.08.2014和8.8.2014都是有效的。 （即日期和月份前面的零是可选的）