创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天靖的ASP.NET技术博客

专注于最简单,且最实用的ASP.NET技术

 
 
 

日志

 
 

最简单的JS验证框架,效果非常好哦  

2009-07-17 08:59:30|  分类: ASP.NET技术 |  标签: |举报 |字号 订阅

很久没有来了,今天来公布本人的一个私藏作品,呵呵,讨厌做验证的朋友们可千万不要错过哦,我先说明一下效果,引用这段JS,然后设置要验证控件的一个属性,然后就会自动验证了哦,如果发现录入数据不符合规则便会自动聚焦到该控件,现在支持的类型有空验证、完美数字验证、多种时间格式验证、电话验证、EMAIL验证等,有兴趣的朋友还可以自己扩展验证方式哦,好啦好啦,废话不多说了,现在就放出JS(我不知道如何在博客文章中附带文件,知道的朋友就告诉我一下吧)

 

//验证输入是否符合要求 2008-4.12 by 陈江
function valid()
 {
 
    if(!validate("input"))
        return false;
    if(!validate("textArea"))
        return false;
    return true;
 }
 //需要验证的类型,要搜索的类型,INPUT OR TEXTAREA OR....暂时只支持对value、innerHTML属性的验证
 //搜索条件,validator属性设置为:验证类型_错误提示,验证类型_错误提示 or 验证类型_错误提示
 function validate(controlType){
       var texts =document.getElementsByTagName(controlType);
    for(var i=0;i<texts.length;i++)
    {
      if(texts[i].validator!=""&&texts[i].validator!=null)
         {
     var l=parseInt(mysplit(texts[i].validator).length);
     if(l==1)
     {
            var value;
            if(controlType=="input")
                value=texts[i].value;
            else
                value=texts[i].innerHTML;
      var type=getType(texts[i].validator);
      if(!yz(value,type))
      {
      alert(getName(texts[i].validator));
      texts[i].focus();
      return false;
      }
     }
     else
     {
      var strs=mysplit(texts[i].validator);
      for(var a=0;a<strs.length;a++)
      {
             if(controlType=="input")
                    value=texts[i].value;
                else
                    value=texts[i].innerHTML;
       var type=getType(strs[a]);
      
       if(!yz(value,type))
       {
        alert(getName(strs[a]));
        texts[i].focus();
        return false;    
       }
      }
     }
   }
     }
  
  return true;
 }
 //判断文本验证类型并做出相应反应,可扩展
 function yz(value,type)
 {
  
  if(type=="N")
  {
   return isNotNull(value);
  }
  else if(value=="")
      return true;
  else if(type=="F")
  {
   return isNumberFloat(value);
  }
  else if(type=="P")
  {
   return checkTelFormat(value);
  }
  else if(type=="E")
  {
   return isEMail(value);
  }
  else if(type=="D")
  {
      return isDate(value);
  }
  else{
   return true;
  }
 }
 function getType(validator){
    
  var type=validator.split('_')[0];
  return type.toUpperCase();
 }
 function getName(validator)
 {
  var name=validator.split('_')[1];
  return name;
 }
 function mysplit(validator)
 {
  var end=validator.split(',');
  return end;
 }
 function isNotNull(value)
 {
            var parten = /^\s*$/ ;
            //执行验证
            if(parten.test(value))//如果只有空格和回车
            {
                return false;
   }
   return value.length>0;
 }
 function isNumberFloat(value)
 {
  if(value=="")
  {
      return true;
  }
  else
  {
       var myCount=0;//对小数点进行计数
       var i = 0;
          for(i=0; i<value.length; i++)
            {
                   if(value.charAt(i)=='.')
                   {
                      if(myCount>0)
                      {
                        return false;
                      }
                       myCount=1;
                       //continue;
                   }
                   else if(value.charAt(i)<'0' || value.charAt(i)>'9'||value.charAt(i)=='.')
                   {
                      return false;
                   }
             }
        }
         return true
 }
 function  checkTelFormat(value)
 {  
 if(value=="")
   return true;
  var reg = (/^(\+\d*)?(\d{11})|((((\()?\d{2,4}(\))?[-(\s)*]){0,2})?(\d{7,8}))$/);
   if(value.match(reg)!=null)// 电话号码格式正确  
   return true;
   else //号码格式错误
   return false;
 }
 function isEMail(value)
 {
  if(value=="")
     return true;
  var reg=(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/);
  if(value.match(reg)!=null)// EMAIL格式正确  
   return true;
   else //格式错误
   return false;
    }
    function isDate(value){
       if(value=="")
          return true;
       var regReplace=new RegExp("[.]","g");
       value=value.replace(regReplace,"-"); 
       regReplace=new RegExp("[/]","g");
       value=value.replace(regReplace,"-"); 
       //这种验证带时间
       var reg=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$/;
       //这种只验证日期
       var reg2=/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;
       if(value.match(reg)!=null)
       {  return true;}
       if(value.match(reg2)!=null)
         {return true;}
       return false;
    }
 
 function dlete(msg)
 {
     return confirm(msg);
 }

将这段代码封装为JS文件,在页面中引用,然后就可以开始做验证工作

比如我需要验证一个TEXTBOX不为空,且必须为数字<asp:TextBox id="t1" runat="server" validator="N_不能为空,F_必须为数字"/>,如何激发验证呢,呵呵,看到这里很简单了吧?比如说我有一个BUTTON提交的话,可以<asp:Button id="btn1" runat="server" onclick="btn1_click" onClinetClick="return valid()"/>,这样就可以了,很简单吧。

  如果使用该文件和转载该文的朋友请保留我的名字,注明转载,谢谢我会陆续发一些我自己写的珍藏代码的,谢谢大家。

  评论这张
 
阅读(552)| 评论(2)
|      
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014