jQuery 日期格式验证（突出显示文本字段）答案

【问题标题】：jQuery Date Format Validation (Highlight The Text Field)jQuery 日期格式验证（突出显示文本字段）
【发布时间】：2013-02-06 12:54:06
【问题描述】：

我在 html 页面上有一个日期文本框。我想在运行时使用 jQuery 为 dd-mm-yyyy 格式验证它。如果输入的格式无效，文本框的背景会变成红色。

我正在使用以下，但没有这样做。

<script>
jQuery(document).ready(function(){
 jQuery('#submit').click(function () {
  var dateReg = /^\d{2}\-\d{2}\-\d{4}$/;

  if(!dateReg.test(date.val())){
    date.addClass('highlight');
    jQuery(date).focus();
    return false;
  } else date.removeClass('highlight');
}); 
});
</script>

<style>
    .highlight { background: #FFE6E7; }
</style>

<body>
    <form>
    <input type="text" name="date"/> <em>(dd-mm-yyyy)</em><br>
    <input type="submit" value="submit" id="submit"/>
    </form>
</body>

...

我尝试过但无法实现:( 其次，我希望在用户输入值后立即对其进行验证。不是点击提交。

谁能帮我解决这个问题？

【问题讨论】：

标签： jquery validation date-format

【解决方案1】：

你的正则表达式很好，但你的 jQuery 不是：

jQuery('#date').focus

你可以在按键上使用：

jQuery('#submit').keypress

或者你可以使用focus out，当失去焦点时触发：

jQuery('#submit').focusout

但请务必始终检查后端！任何人都可以禁用 javascript

【讨论】：

好的，我自己修好了。我做了一个全新的代码。所以我要把它分享在这里，以便其他人也可以使用它。

【解决方案2】：

我自己编写了一个新代码。它也在提交按钮的OnClick上工作，但突出显示它的目的达到了。

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>
$(function() {
    $('#btnSubmit').bind('click', function(){
        var txtVal =  $('#txtDate').val();
        if(isDate(txtVal))
            $('#txtDate').removeClass('highlight');            
        else
            $('#txtDate').addClass('highlight');
    });

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 dd/mm/yyyy format.
    dtDay = dtArray[1];
    dtMonth= dtArray[3];
    dtYear = dtArray[5];        

    if (dtDay < 1 || dtDay > 31) 
        return false;
    else if (dtMonth < 1 || dtMonth> 12) 
        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;
}
});
</script>


<style>
.highlight { background-color:#FFE6E7; }
</style>
</head>

<body>
<br/><br/>
Date : <input type="text" id="txtDate" /> (dd/mm/yyyy)
<br/><br/>
<input type="button" value="ValidateDate" id="btnSubmit"/>
</body>

</html>

【讨论】：