JQueryを使用してasp.netのTextBoxに日付を入力するときの検証方法？

これは、テキストボックスにユーザーのクリックが、それは日付ピッカーを選択し、日付を開いたとき、私はテキストボックスを持っている私のコード上記のコードで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日

出典

2016-07-27 durga siva kishore mopuru

あなたは特別な日付を入力するために提供されてtype="date"に変更したいことがあります。

出典

2016-07-27 06:51:45 FDavidov

を使用してasp.netの日時のための最終的なコードであります入力された値は常に合法です。 – FDavidov

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?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'); 
} 
)};

出典

2016-07-27 07:01:57

あなたのロジックはうまく動作しますが、テキストボックスをクリックするとカレンダーが開きます。日付を選択すると、日付が有効ではなく次の2回目の日付が正しく選択されます –

jqueryライブラリとui jsの絶対URLを与えることでコードスニペットを編集できますスニペットの実行中に問題が発生します。 –

私のコードでもう一度チェックしてくださいjqueryのURLを変更します –

これは、入力保証のこのタイプを使用して、ところで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); 
 
       } 
 
      }); 
 
     
 
     }); 
 
\t </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>

出典

2016-07-28 07:42:58

JQueryを使用してasp.netのTextBoxに日付を入力するときの検証方法？

答えて

関連する問題