简体   繁体   English

如何在表单onblur中验证日期

[英]How to validate Date in form onblur

  function validatedate(inputText) { 
    var thsid = $(inputText).attr('id');
    var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/; 
  }

This is my common js method [incomplete] onblur="validatedate(this)" but its accepting invalid dates also 这是我常见的js方法[不完整] onblur="validatedate(this)"但它接受的无效日期也是

I have one datepicker in my jsp as textbox.onblur i need to validate date using javascript 我在我的jsp中有一个datepicker作为textbox.onblur我需要使用javascript验证日期

these are the rules 这些都是规则

  1. mm/dd/yy format mm / dd / yy格式
  2. mm should not exceed 31 mm不应超过31
  3. dd should not exceed 12 dd不应超过12
  4. should be commom method for all datepickers 应该是所有日期选择器的通用方法
  5. if given input invalid ..should give an alert and empty datepicker.............. 如果给定输入无效..应该给出警报和空的日期选择器..............

Change: 更改:

onblur="validatedate(this)"

To: 至:

onblur="validatedate(this.value);"

this contains input DOM element itself and not the input's text value. this包含输入DOM元素本身而不是输入的文本值。

Also your validatedate() function appears to be doing nothing. 此外,您的validatedate()函数似乎无所作为。 There is no return value, no alert or anything to stop form processing. 没有返回值,没有警报或任何停止表单处理的内容。 I take for granted you only supplied a snippet of the function itself. 我理所当然地认为你只提供了一个功能片段。

Now my method is ready..with the help of stackoverflow: 现在我的方法已准备好...借助stackoverflow:

  function validatedate(inputText)  
{ 
var thsid=$(inputText).attr('id');
var classname=$(inputText).attr('class');
   var classstr=classname.split(" ");
var ret=true;
var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;  
// Match the date format through regular expression  
if(inputText.value.trim()!="")
{
if( inputText.value.trim().match(dateformat))  
 {  
  // document.form1.text1.focus();  
   //Test which seperator is used '/' or '-'  
   var opera1 = inputText.value.split('/');  
   var opera2 = inputText.value.split('-');  
  lopera1 = opera1.length;  
 lopera2 = opera2.length;  
  // Extract the string into month, date and year  
   if (lopera1>1)  
    {  
  var pdate = inputText.value.split('/');  
  }  
  else if (lopera2>1)  
  {  
  var pdate = inputText.value.split('-');  
  }  
 var mm  = parseInt(pdate[0]);  
 var dd = parseInt(pdate[1]);  
 var yy = parseInt(pdate[2]);  
  // Create list of days of a month [assume there is no leap year by default]  
   var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];  
  if (mm==1 || mm>2)  
  {  
  if (dd>ListofDays[mm-1])  
  {  
  alert('Invalid date format!');
 $(inputText).focus();
  inputText.value="";
   ret=false;
  return false;  
  }  
 }  
 if (mm==2)  
  {  
 var lyear = false;  
 if ( (!(yy % 4) && yy % 100) || !(yy % 400))   
  {  
 lyear = true;  
 }  
 if ((lyear==false) && (dd>=29))  
  {  
  alert('Invalid date format!'); 
  $('#'+thsid).focus();
   inputText.value="";
   ret=false;
  return false;  
 }  
 if ((lyear==true) && (dd>29))  
 {  
 alert('Invalid date format!');  
         $('#'+thsid).focus();
 inputText.value="";
  ret=false;
   return false;  
 }  
  }  
  }  
  else  
   {  
   alert("Invalid date format!");  
    $('#'+thsid).focus();
 inputText.value="";
    ret=false;
  return false;  
       }
 }

Saidesh's answer got me most of the way to where I wanted, but I didn't like the JQuery dependency. Saidesh的回答让我大部分都能到达我想要的地方,但我不喜欢JQuery依赖。 I added a couple minor improvements as well as a fully functional test page. 我添加了一些小改进以及功能齐全的测试页面。

 <html> <head> <script type="application/javascript"> function validatedate(inputTextObject) { // matches 11/12/2011 or 11-12-2011 var ret = true; var dateformat = /^(0?[1-9]|1[012])[\\/\\-](0?[1-9]|[12][0-9]|3[01])[\\/\\-]\\d{4}$/; // Match the date format through regular expression if (inputTextObject.value.trim() != "") { if (inputTextObject.value.trim().match(dateformat)) { // document.form1.text1.focus(); //Test which seperator is used '/' or '-' var opera1 = inputTextObject.value.split('/'); var opera2 = inputTextObject.value.split('-'); lopera1 = opera1.length; lopera2 = opera2.length; // Extract the string into month, date and year if (lopera1 > 1) { var pdate = inputTextObject.value.split('/'); } else if (lopera2 > 1) { var pdate = inputTextObject.value.split('-'); } var mm = parseInt(pdate[0]); var dd = parseInt(pdate[1]); var yy = parseInt(pdate[2]); // Create list of days of a month [assume there is a leap year by default] var ListofDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if (mm == 1 || mm > 2) { if (dd > ListofDays[mm - 1]) { alert('Invalid date format!'); inputTextObject.focus(); ret = false; } } if (mm == 2) { var lyear = false; if ((!(yy % 4) && yy % 100) || !(yy % 400)) { lyear = true; } if ((lyear == false) && (dd >= 29)) { alert('Invalid date format!'); inputTextObject.focus(); ret = false; } if ((lyear == true) && (dd > 29)) { alert('Invalid date format!'); inputTextObject.focus(); ret = false; } } } else { alert("Invalid date format!"); inputTextObject.focus(); ret = false; } if (ret == false) { inputTextObject.style.color='red'; } else { inputTextObject.style.color='blue'; } } return ret; } </script> </head> <body> Date Test (<strong>mm/dd/yyyy</strong>): <input name="date_test" type="text" onblur="validatedate(this);" /> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmAQMAAACS83vtAAAABlBMVEUAAAD///+l2Z/dAAAACXBIWXMAAAsTAAALEwEAmpwYAAAApElEQVQI1y3OQWpCMQBF0ZtnqF8Q286FCm7CgdgsqUv44qBuqvKXEqgLiCIokuY5qGcFJxiwcABxJoEHXhseedTkKQeony5NNdH1FLtuFEDofPc2i2sbeh0hl0jZgzoiKw1vPQhYICZKiJfQI4CFSFyyDA2FjFCCgm5fHLvIjWGs+Zo94fdvvnScOW74/6jbfdf0XClz4rnl530KLnw0XHELBvwAwg1K5dfpv8IAAAAASUVORK5CYII=" /> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM