繁体   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}$/; 
  }

这是我常见的js方法[不完整] onblur="validatedate(this)"但它接受的无效日期也是

我在我的jsp中有一个datepicker作为textbox.onblur我需要使用javascript验证日期

这些都是规则

  1. mm / dd / yy格式
  2. mm不应超过31
  3. dd不应超过12
  4. 应该是所有日期选择器的通用方法
  5. 如果给定输入无效..应该给出警报和空的日期选择器..............

更改:

onblur="validatedate(this)"

至:

onblur="validatedate(this.value);"

this包含输入DOM元素本身而不是输入的文本值。

此外,您的validatedate()函数似乎无所作为。 没有返回值,没有警报或任何停止表单处理的内容。 我理所当然地认为你只提供了一个功能片段。

现在我的方法已准备好...借助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的回答让我大部分都能到达我想要的地方,但我不喜欢JQuery依赖。 我添加了一些小改进以及功能齐全的测试页面。

 <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