DatePicker 验证 Jquery 如何验证

Posted 2023-05-09

【中文标题】DatePicker 验证 Jquery 如何验证

【英文标题】：DatePicker Validation Jquery How to Validate

【发布时间】：2014-10-08 05:27:25

【问题描述】：

我有一个 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”？

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

这里是脚本代码和its link.

 $(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 = /^(\d1,2)(\/|-)(\d1,2)(\/|-)(\d4)$/; //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;


);

【参考方案1】：

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

var rxDatePattern = /^(\d1,2)(\.|-)(\d1,2)(\.|-)(\d4)$/; //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);
);

See 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)\d2))|((0?[1-9]|[12]\d|30)\.(0?[13456789]|1[012])\.((19|[2-9]\d)\d2))|((0?[1-9]|1\d|2[0-8])\.0?2\.((19|[2-9]\d)\d2))|(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 均有效。 （即日期和月份前面的零是可选的）

【讨论】：

感谢您的回答，但是当类型错误时我仍然可以单击按钮。我的日期类型是：0:dd.MM.yyyy 我正在尝试像这样转换你的：dtDay = dtArray[1]; dtMonth = dtArray[3]; dtYear = dtArray[5];是真的吗？

而我的 txtDate 值来自这样的控制器：txtDate = 14.8.2014 19:27:26。有什么想法吗？

我解决了日期类型的问题。当我尝试为我的日期选择器（真实格式）按钮设置值时仍然不起作用。当我用手动按钮输入时。

谢谢。你的回答很好。但是当我用我的日期选择器选择日期并将其值设置为文本框时，按钮仍然没有激活，但是当我在文本框中输入数字时一切都很好。所以按钮不识别日期选择器选择的值。我将在另一个项目中使用您的代码。我的解决方案是我将日期文本框设为只读，并找到一个带有月、年和日选项的 jquery datepicker。

是的，尝试将 "$('#txtDate').on('keyup', function()" 部分更改为 "$('#event_ends_at').on('keyup 更改粘贴输入changeDate', function()" 在 document.ready 函数中。这行得通吗？