表单日期验证插件实现

来源：互联网发布：美工做图用什么电脑编辑：程序博客网时间：2024/06/10 15:55

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

0 0