[英]How to validate when enter date in TextBox in asp.net using 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> <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->這次顯示警報提示無效日期，例如：-01-01-2016
嘗試使用正則表達式驗證日期，此下面的表達式將接受所有可能的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');
}
)};
您可能希望更改為專門用於輸入日期的type="date" 。
這是使用jquery在asp.net中datetime的最終代碼
<%@ 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> <br /> <br /> <br /> </div> </form> </body> </html>
更新時如何使用javascript驗證asp.net gridview文本框？
[英]How to validate asp.net gridview textbox using javascript when updating?
用戶使用JQuery切換到Asp.net文本框值時，如何用它替換以前的asp.net文本框值？
[英]How can I fill an asp.net textbox with a previous asp.net textbox value when the user tabs to it using JQuery?
當我使用 jQuery 在 asp.net 中按 Enter 鍵時，如何找到兩個默認提交按鈕？
[英]How to find two default submit buttons when i press the Enter key in asp.net using jQuery?
如何在ASP.NET網頁中使用javascript在gridview中驗證動態創建的文本框
[英]How to validate dynamically created textbox in gridview using javascript in asp.net web page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.