Question

这是我的代码

＆＃13;

<%@ 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>

＆＃13;

在上面的代码中，我有一个文本框，当用户点击文本框时，它会打开datepicker并选择日期。如果用户手动输入日期如何使用jquery进行验证。例如： - 01011 - ＆gt;此时显示无效日期的提醒例如： - 01-01-2016

Answer 1

尝试使用正则表达式验证日期，以下表达式将接受所有可能的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?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|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');
}
)};

Answer 2

您可能希望更改为专门用于输入日期的type="date"。

Answer 3

这是使用jquery

的asp.net中datetime的最终代码

＆＃13;

<%@ 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>

＆＃13;

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

3 个答案: