如何在表单onblur中验证日期

时间:2013-10-30 13:17:46

标签: javascript jquery html html5 validation

  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 format
  2. mm不应超过31
  3. dd不应超过12
  4. 应该是所有日期选择器的通用方法
  5. 如果给定的输入无效..应该发出警告并且空的日期选择器..............

3 个答案:

答案 0 :(得分:2)

变化:

onblur="validatedate(this)"

要:

onblur="validatedate(this.value);"

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

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

答案 1 :(得分:0)

现在我的方法已准备好......借助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;  
       }
 }

答案 2 :(得分:0)

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>
&#13;
&#13;
&#13;