表单日期验证插件实现

这仅仅只是一个验证表单日期输入是否正确的插件，所以实现比较简单，但大家可以见微知著进行拓展，会提供Demo

实现：

首先定义input,需保证input具有data-validate-date和data-date-pattern属性，如下：

<input  maxlength=2 data-validate-date="data-validate-date" data-date-pattern="mm" id="input_1"/>

然后添加日期验证函数：

  //"YY MM DD hh mm ss" must be in order
 //YYMMDDhhmmss is ok
 function validator_date(value, pattern)
 {
    if( value.length != pattern.length)
		   return { "result":false, "msg":"请保证输入长度为:"+pattern.length };
    if( isNaN(value))
        return { "result":false, "msg":"请输入数字" };

		var p_arr = [], s_arr =[];
	    for(var i=0; i<pattern.length; i= i+2) 
	    {
	    	p_arr.push(pattern.charAt(i));	
	    	s_arr.push(value.substr(i, 2));
	    } 

	    var result = true;
	    var msg = "";
		for(var i=0; i<p_arr.length; i++)
		  {
			   switch( p_arr[i])
			   {
			   		case "Y":   // everything is ok
			   			break;
			   		case "M":   
			   		    if( parseInt(s_arr[i]) <1 || parseInt(s_arr[i]) >12 )
			   		    {
			   		    	result = false;
			   		        msg += "月份值:"+parseInt(s_arr[i])+" 输入错误\n";
			   		    }
			   			break;
			   		case "D":
			   		    //it depends on M, leap year is eliminated!
                     var  days = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                        // if leap year, february has 29 days!
                        if( p_arr[0] === "Y" )
                           var year = "20" + s_arr[0];
                           year = parseInt(year);
                        days[2] = ( (year%4==0 && year%100!=0)||year%400==0)?29 : 28;

                     var max = 31;
                     if( p_arr[0] === "M" )
                         max = days[parseInt(s_arr[0])];
                      if(p_arr[1] === 'M')
                     	max = days[parseInt(s_arr[1])];
                     if( parseInt(s_arr[i]) <1 || parseInt(s_arr[i]) >max )
			   		    {
			   		    	result = false;
			   		        msg += "天数值:"+parseInt(s_arr[i])+" 输入错误\n";
			   		    }
			   			break;
			   		case "h":
			   		    if( parseInt(s_arr[i]) <1 || parseInt(s_arr[i]) >24 )
			   		    {
			   		    	result = false;
			   		        msg += "小时值:"+parseInt(s_arr[i])+" 输入错误\n";
			   		    }
			   			break;
			   		case "m":
			   		    if( parseInt(s_arr[i]) <1 || parseInt(s_arr[i]) >60 )
			   		    {
			   		    	result = false;
			   		        msg += "分钟值:"+parseInt(s_arr[i])+" 输入错误\n";
			   		    }
			   			break;
			   		case "s":
			   		    if( parseInt(s_arr[i]) <1 || parseInt(s_arr[i]) >60 )
			   		    {
			   		    	result = false;
			   		        msg += "秒数值:"+parseInt(s_arr[i])+" 输入错误\n";
			   		    }
			   			break;
			   
			   }
		  }
	  	  return { "result":result, "msg":msg };
 }

添加浮动框，其使用absolute样式，通过获取top和left来实现定位

<style>
   .n-input-error{
      border: 2px solid #FF0000;
      color:red;
   }
   p#vtip {
        position: absolute; 
        padding: 10px; 
        left: 5px; 
        font-size: 0.8em; 
        background-color: white; 
        border: 1px solid #a6c9e2; 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        z-index: 9999;
  }
   p#vtip #topArrow { 
     position: absolute; 
     top: -10px; 
     left: 5px 
   }
</style>

最后绑定事件响应即可

<script type="text/javascript">
      $(function(){
	     $("[data-validate-date='data-validate-date']").each(function(e){
	       $("p#vtip").remove();
		   var obj = $(this);
		   obj.keyup(function(e){
			   var pos = $(this).position();
			   var pattern = $(this).attr("data-date-pattern");
			   var obj = validator_date($(this).val(), pattern);
			   if( !obj.result ){
				   $(this).addClass("n-input-error");
				   $(this).attr("title", obj.msg);
				    var top =  (pos.top + 20);
				    var left = (pos.left - 5);
				    $("p#vtip").remove();
					$('body').append( '<p id="vtip"><img id="topArrow" src="img/top_arrow.png"/>' + obj.msg + '</p>' );
					$('p#vtip').css("top", top+"px").css("left", left+"px");
			   }
			   else{
				   $(this).removeClass("n-input-error");
				   $(this).attr("title", "");
				   $("p#vtip").remove();
			   }
		   })
		     .blur(function(){
		    	 $("p#vtip").remove();
		   });
	   });      	
      });

</script>

Demo下载地址 http://pan.baidu.com/share/link?shareid=4221199729&uk=1763003608