如何使用JQuery在asp.net的TextBox中验证何时输入日期

这是我的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datetime.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id$=txtDate]").datepicker({});
            $("#txtDate").blur(function () {
                val = $(this).val();
                val1 = Date.parse(val);
                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("mm-dd-yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    </form>
</body>
</html>

在上面的代码中，我有一个文本框，当用户点击文本框时，它会打开日期选择器并选择日期。如果用户手动输入日期，如何使用jquery进行验证。例如：-01011-->此时间显示无效日期的警报例如：2016年1月1日

您可能希望更改为type="date"，它是专门为输入日期而提供的。

尝试使用regex验证日期，下面的表达式将接受所有可能的3种格式dd/mm/yyyy、dd-mm-yyyy或dd.mm.yyyy。

Jquery：

$("#txtDate").datepicker();
$("#txtDate").blur(function () {
var pattern = /^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$/;
var validateDate = pattern.test($(this).val());
if(validateDate)
{
 alert('Date is valid');
}
else
{
alert('Date is not valid');
}
)};

这是asp.net中使用jquery 的日期时间的最终代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datetime.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link type="text/css" href="Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
     <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
     <script src="Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
  <%--  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />--%>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker({ dateFormat: "dd/mm/yy" });
            //Bind keyup/keydown to the input
            $("#txtDate").bind('keyup', 'keydown', function (e) {
                //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
                if (e.which !== 8) {
                    var length = $("#txtDate").val().length;
                    if (length == 2) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val("0" + $("#txtDate").val().substring(0, 1));
                        }
                        var date = $("#txtDate").val().substring(0, 2);
                        if (date > 31) {
                            $("#txtDate").val("");
                        }
                    }
                    else
                        if (length == 5) {
                            if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                                $("#txtDate").val($("#txtDate").val().substring(0,3)+ "0" + $("#txtDate").val().substring(3, 4));
                            }
                            var month = $("#txtDate").val().substring(3, 5);
                            if (month > 12) {
                                $("#txtDate").val($("#txtDate").val().substring(0, 2));
                            }
                        }
                    if (length > 6) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val($("#txtDate").val().substring(0, length-1));
                        }
                    }
                        
                            var numChars = $("#txtDate").val().length;
                            if (numChars === 2 || numChars === 5) {
                                var thisVal = $("#txtDate").val();
                                thisVal += '/';
                                $("#txtDate").val(thisVal);
                            }
                  
                }
            });
            $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
            $("#txtDate").blur(function () {
                val = $(this).val();
                val1 = Date.parse(val);
                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
      
        });
	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtDate" runat="server" MaxLength="10" type="date"></asp:TextBox>
    &nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
    </div>    
    </form>
</body>
</html>

相关内容

最新更新

热门标签：