‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[转载]表单检验的超级方便的方法

金州

智囊团成员

Rank: 7Rank: 7Rank: 7Rank: 7

E.S.T智囊团成员

帖子
1244 
精华
8 
积分
6154 
阅读权限
150 
性别
男 
在线时间
593 小时 
注册时间
2005-3-18 
最后登录
2008-6-6 

原创技术奖

楼主 大 中 小 发表于 2006-2-1 09:48  只看该作者

[转载]表单检验的超级方便的方法

信息来源：Wayne_Deng的专栏

受coldfusion的影响，想出了这样一个检验表单的方法：
注意红色标记出来的部分！是不是超直观？完整代码在这里下载js_check.rar

以下是代码片段：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript" SRC="js_check.js"></SCRIPT>
</head>

<body>
<form action="" onSubmit="return pub_valuecheck(this);" method="post">
   数字测试：<input type="text" name="textfield" required="true" message="这里要填数字" datatype="number">
   <br>
   <br>
长度测试：<textarea name="textfield1" required="true" message="长度不能超过2" maxlength="2"></textarea>
   <br>
   <br>
正则表达式测试：<input type="text" name="textfield2" required="true" message="email格式不正确" RE="\w+@((\w+[.]?)+)">
   <br>
   <br>
  日期测试（dd/mm/yyyy）：<input type="text" name="textfield3" required="true" message="这里要填日期" datatype="date">
   <br>
   <input type="submit" name="Submit" value="Submit">
</form>

<script language="javascript">
function Checkform(){
//其它的检验在这里完成！
return true;
}
</script>
</body>
</html>



js_check.js
以下是代码：
//js_auto_check  Create by Wayne Deng http://www.waynedeng.com/blog
var errmsg=&#39;&#39;;
function pub_valuecheck(obj){
errmsg=&#39;&#39;;
prv_validcheck(obj.children);
if(errmsg.length>1) alert(errmsg);
return errmsg.length<=1&&Checkform();;
}

function prv_validcheck(obj){
var message=&#39;&#39;;
for (var i=0;i<obj.length;i++){  
  if(obj.style.display==&#39;none&#39;) continue;
  
  var value=&#39;&#39;;
  if(obj.tagName==&#39;INPUT&#39;||obj.tagName==&#39;SELECT&#39;||obj.tagName==&#39;CHECKBOX&#39;||obj.tagName==&#39;RADIO&#39;)
  value=obj.value;
  if(obj.tagName==&#39;TEXTAREA&#39;)
  value=obj.innerHTML;
  
  message=&#39;&#39;;
  if (obj.message!=undefined) message=obj.message;
  
  if (obj.required!=undefined&&obj.required==&#39;true&#39;&&value.length==0){
  addmsg(obj.caption + &#39; is required!\n&#39;);
  }
  if (obj.datatype!=undefined&&value.length>0){
  if (obj.datatype==&#39;number&#39;){
    if(!(/^\d+$/.test(value)))
    addmsg (obj.caption + &#39; should be a number!\n&#39;);
  }
  if (obj.datatype==&#39;date&#39;&&!pub_isDateTime(value)){
   addmsg (obj.caption + &#39; should be a date (dd/mm/yyyy)!\n&#39;);
  }
  }
  
  if (obj.maxlength!=undefined&&value.length>obj.maxlength){
  addmsg(obj.caption + &#39; is to long (&#39; + obj.maxlength + &#39; max)!\n&#39;);
  }
  if (obj.RE!=undefined&&value.length>0){
  re = new RegExp(obj.RE);
  if(!re.test(value))
   addmsg (obj.caption + &#39; format error!\n&#39;);
  }
  prv_validcheck(obj.children);
}

function addmsg(msg){
  if (message==&#39;&#39;) errmsg=errmsg +msg; else errmsg=errmsg+message+&#39;\n&#39;;
}
}

function pub_isDateTime(chkValue){
var rn = chkValue.match(/(\d{2})\/(\d{2})\/(\d{4})/);
if (rn==null) return false;
var d = new Date(rn[3], rn[2]-1, rn[1]);
return (d.getFullYear()==rn[3]&&(d.getMonth()+1)==rn[2]&&d.getDate()==rn[1]);
}

附件

js_check.rar (2 KB)

2006-2-1 09:48, 下载次数: 146

人情如冰六月寒，花做一份艳，为谁笑人间？ 如果任何人发现我转载的有图像的文章中图像失效或者文章有问题，请及时短消息通知我。先谢谢。：：）） coup de foudre

TOP

haicao

技术核心组

Rank: 8Rank: 8

E.S.T核心成员 项目主管

帖子
428 
精华
24 
积分
5194 
阅读权限
200 
性别
男 
在线时间
164 小时 
注册时间
2004-10-5 
最后登录
2008-7-13 

软件研发奖 技术活跃奖 原创技术奖

沙发 大 中 小 发表于 2006-7-12 15:14  只看该作者
顶不错
在我纯真年少時,有一個女生,她願意爲我失去生命,她意志堅定地說:你再纏著我,我就去死! 在我負笈外地時,有一個女生,她願意等我到下輩子,她溫柔婉約地說:你想成爲我男友?等下輩子!! 在我窮困潦倒時,有一個女生,她願意與我共赴黃泉,她眨著紅眼說:你再不還錢,我和你同歸于盡!

TOP

天下第七

荣誉会员

Rank: 6Rank: 6Rank: 6

帖子
876 
精华
10 
积分
4546 
阅读权限
100 
性别
男 
来自
甘肃 
在线时间
195 小时 
注册时间
2004-9-26 
最后登录
2008-6-5 
椅子 大 中 小 发表于 2006-8-17 01:21  只看该作者
确实很不错。。。测试正常。就是js不够精简。
曾因酒醉鞭名马 生怕情多累美人

TOP

haicao

技术核心组

Rank: 8Rank: 8

E.S.T核心成员 项目主管

帖子
428 
精华
24 
积分
5194 
阅读权限
200 
性别
男 
在线时间
164 小时 
注册时间
2004-10-5 
最后登录
2008-7-13 

软件研发奖 技术活跃奖 原创技术奖

板凳 大 中 小 发表于 2006-9-27 14:40  只看该作者
我这边有个更精典的js共享出来一下.
在我纯真年少時,有一個女生,她願意爲我失去生命,她意志堅定地說:你再纏著我,我就去死! 在我負笈外地時,有一個女生,她願意等我到下輩子,她溫柔婉約地說:你想成爲我男友?等下輩子!! 在我窮困潦倒時,有一個女生,她願意與我共赴黃泉,她眨著紅眼說:你再不還錢,我和你同歸于盡!

TOP

haicao

技术核心组

Rank: 8Rank: 8

E.S.T核心成员 项目主管

帖子
428 
精华
24 
积分
5194 
阅读权限
200 
性别
男 
在线时间
164 小时 
注册时间
2004-10-5 
最后登录
2008-7-13 

软件研发奖 技术活跃奖 原创技术奖

地板 大 中 小 发表于 2006-9-27 14:41  只看该作者
复制内容到剪贴板
代码:
//=====================.net客户段验证2.0===========================
//   
//   
//           &#39;&#39;&#39;
//          (0 0)
//  +-----oOO----(_)------------+
//  |                  |
//  |  作者:高处不胜寒      |
//  |  QQ:28767360         |
//  |                  |
//  +------------------oOO------+
//          |__|__|
//          || ||
//          ooO Ooo  
//===========================================================

function ck(http)
{
  var IP="[url]http://wufeng/bzgl/[/url]"+http;
  window.top.main.location.href=IP;
  dh(&#39;Home&#39;,&#39;Operation&#39;,&#39;Stock&#39;,&#39;Storage&#39;,&#39;Report&#39;,&#39;Sys&#39;,&#39;Help&#39;);
}

function fob(n, d)
{
  var p,i,x;if(!d) d=document;
  if((p=n.indexOf("?"))>0&&parent.frames.length)
  {
     d=parent.frames[n.substring(p+1)].document;
     n=n.substring(0,p);
  }
  if(!(x=d[n])&&d.all)
  x=d.all[n];
  for (i=0;!x&&i<d.forms.length;i++)
  x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++)
  x=fob(n,d.layers[i].document);
  return x;
}     

function cb()
{
  var a=cb.arguments;
  var name=fob(a[0]);
  e=document.forms(0).elements;
  if (name.checked==true)
  {
    for (i=0;i<e.length;i++)
    {
      e[i].checked=true;
    }
  }
  else
  {
    for (i=0;i<e.length;i++)
    {
      e[i].checked=false;
    }
  }
}

function vdf()
{
  var i,j,name,value,message,length,type,a=vdf.arguments,cb_name;
  for (i=0; i<(a.length-2); i+=3)
  {
     if (a[i].indexOf(&#39;#&#39;)!=-1)
     {
        name=fob(a[i].substr(0,a[i].indexOf(&#39;#&#39;)));
        cb_name=fob(a[i].substr((a[i].indexOf(&#39;#&#39;)+1),a[i].length));
     }
     else
     {
       name=fob(a[i]); // 控件名称
     }
     message=a[i+1]; // 提示信息
     type=a[i+2]; // 类型
     if (type!="r_time")
     {
       value=name.value.replace(/ +/g, ""); // 控件值
     }
     else
     {
       value=name.value;
     }
  
     if (name)
     {
      
     // ===============判断复选框是否选中================ //
       if (type=="r_cb")
       {   
         e=document.forms(0).elements;
         var flag=false;
         for (i=0;i<e.length;i++)
         {
           if (e[i]!=cb_name)
           {
             if (e[i].checked==true)
             {
                flag=true;
                break;
             }
           }
           if (i==e.length-1)
           {
              break;
           }
         }
         if (flag==false)
         {
           alert(message+"!\n"); //为空时出现的提示
           return false;
         }
       }
      
       // ===============判断下拉框是否选择================ //
       if (type=="r_sl")
       {
        if (name.selected==false)
        {
            alert(message+"!\n"); //为空时出现的提示
            return false;
        }
       }
      
       // ===============不能为空的判断================ //
       if (type=="r")
       {
         if (value=="") // 判断是否为空
         {
            alert(message+"!\n"); //为空时出现的提示
            name.focus();
            name.select();
            return false;
         }
       }
      
       // ===============不能为空的判断,但不获得焦点================ //
       if (type=="o_r")
       {
         if (value=="") // 判断是否为空
         {
            alert(message+"!\n"); //为空时出现的提示
            return false;
         }
       }
      // ===============只能输入中文================ //
      if (type=="r_china")
      {
         if (value.search(/^[\u4e00-\u9fa5]+$/)==-1)
         {
            alert(message+"!\n"); // 判断不能为空
            name.focus();
            name.select();
            return false;
         }
      }
      
      // ===============不能为空,必须是数字或者字符判断================ //
      if (type=="r_num_char")
      {
         if (value=="")
         {
            alert(message+"!\n"); //为空时出现的提示
            name.focus();
            name.select();
            return false;
         }
         if (value.search(/^[0-9a-zA-Z]+$/)==-1)
         {
            alert(message+"!\n"); //为空时出现的提示
            name.focus();
            name.select();
            return false;
         }
       }
      
       // ===============可以为空，不为空时，填数字================ //
      if (type=="num")
      {
         if (value.search(/^[0-9]+$/)==-1 && value!="")
         {
            alert(message+"!\n"); // 判断不能为空
            name.focus();
            name.select();
            return false;
         }
      }
      
      // ===============不能为空,必须是数字判断================ //
      if (type=="r_num")
      {
         if (value=="")
         {
            alert(message+"!\n");
            name.focus();
            name.select();
            return false;
         }
         if (value.search(/^[0-9]+$/)==-1)
         {
            alert(message+"!\n"); // 判断不能为空
            name.focus();
            name.select();
            return false;
         }
       }
      
       // ===============必须输入小于n的数字================ //
       if (type.indexOf("r_num<")!=-1)
       {
          length=type.substring((type.indexOf(&#39;<&#39;)+1),type.length); // 获得rn<后面的数
  
          if (value=="") // 为空做的提示
          {
            alert(message+"!\n");
            name.focus();
            name.select();
            return false;
          }
          if (value.search(/^[0-9]+$/)==-1)  // 不是数字做的提示
          {
            alert(message+"!\n");
            name.focus();
            name.select();
            return false;
          }
          if (value.length>length)  // 限制数字长度做的限制
          {
            alert(message+"!\n");
            name.focus();
            name.select();
            return false;
          }
       }
      
       // ===============必须输入大于n的数字================ //
       if (type.indexOf("r_num>")!=-1)
       {
        length=type.substring((type.indexOf(&#39;>&#39;)+1),type.length); // 获得rn<后面的数
         if (value=="") // 为空做的提示
         {
           alert(message+"!\n");
           name.focus();
           name.select();
           return false;
         }
         if (value.search(/^[0-9]+$/)==-1)  // 不是数字做的提示
         {
           alert(message+"!\n");
           name.focus();
           name.select();
           return false;
         }
         if (value.length<length)  // 限制数字长度做的限制
         {
           alert(message+"!\n");
           name.focus();
           name.select();
           return false;
         }
       }
      
       // ===============必须输入a-b位之间的数字================ //      
      if (type.indexOf("r_num#<>")!=-1)
      {
          length=type.substr((type.indexOf(&#39;>&#39;)+1),type.length);
          length=length.substr(0,length.lastIndexOf("-"));
         length1=type.substring((type.indexOf(&#39;-&#39;)+1),type.length) // 获得rn<后面的数
          if (value=="") // 为空做的提示
         {
          alert(message+"!\n");
          name.focus();
         name.select();
         return false;
        }
        if (value.search(/^[0-9]+$/)==-1) // 不是数字做的提示
        {
         alert(message+"!\n");
         name.focus();
         name.select();
         return false;
        }
        if (value.length<length || value.length>length1)  // 限制数字长度做的限制
        {
         alert(message+"!\n");
         name.focus();
         name.select();
         return false;
        }
      }
      // ===============不能为空,必须是float类型================ //
      if (type=="r_float")
      {
         if (value=="")
         {
            alert(message+"!\n");
            name.focus();
            name.select();
            return false;
         }
         if (value.search(/^[0-9]+$/)!=-1 || value.search(/^([0-9]+)|([0-9]+\.[0-9]*)|([0-9]*\.[0-9]+)$/)!=-1)
         {
           return true;
         }
         else
         {
           alert(message+"!\n"); // 判断不能为空
            name.focus();
            name.select();
            return false;
         }
       }
      
      // ===============判断email,不一定输入================ //  
      if (type.indexOf("email")!=-1)
      {
        if (name.value!="")
        {
           if (value.search(/^[_\.a-z0-9]+@[a-z0-9]+[\.][a-z0-9]{2,}$/i)==-1)
          {
             alert(message+"!\n");
              name.focus();
             name.select();
             return false;
          }
         }
       }

       // ===============判断email,一定输入================ //
      if (type.indexOf("r_email")!=-1)
      {
        if (name.value=="")
        {
        alert(message+"!\n");
        name.focus();
        name.select();
        return false;
        }
        if (value.search(/^[_\.a-z0-9]+@[a-z0-9]+[\.][a-z0-9]{2,}$/i)==-1)
        {
        alert(message+"!\n");
              name.focus();
        name.select();
        return false;
        }
      }
   
    // ===============判断日期,比如2000-12-20================ //
       if (type=="r_date")
       {
          flag=true;
          getdate=value;      
          if (getdate.search(/^[0-9]{4}-(0[1-9]|[1-9]|1[0-2])-((0[1-9]|[1-9])|1[0-9]|2[0-9]|3[0-1])$/)==-1) // 判断输入格式时候正确
          {
             flag=false;
          }
          else
          {
              var year=getdate.substr(0,getdate.indexOf(&#39;-&#39;))  // 获得年
              // 下面操作获得月份
          var transition_month=getdate.substr(0,getdate.lastIndexOf(&#39;-&#39;));
          var month=transition_month.substr(transition_month.lastIndexOf(&#39;-&#39;)+1,transition_month.length);
          if (month.indexOf(&#39;0&#39;)==0)
          {
          month=month.substr(1,month.length);
          }
          // 下面操作获得日期
          var day=getdate.substr(getdate.lastIndexOf(&#39;-&#39;)+1,getdate.length);
          if (day.indexOf(&#39;0&#39;)==0)
          {
          day=day.substr(1,day.length);
          }
          //alert(month);
          //alert(day)
          //return false;
              if ((month==4 || month==6 || month==9 || month==11) && (day>30)) // 4,6,9,11月份日期不能超过30
              {
              flag=false;
              }
          if (month==2)  // 判断2月份
          {
            if (LeapYear(year))
            {
              if (day>29 || day<1){ flag=false; }
            }
            else
            {
              if (day>28 || day<1){flag=false; }
            }
          }
          else
          {
          flag=true;
          }
        }
       if (flag==false)
       {
          alert(message+"!\n"); //为空时出现的提示
          name.focus();
          name.select();
          return false;
       }
      }
      
      
      // ===============判断日期,比如2000-12-20================ //
       if (type=="r_time")
       {
          flag=true;
          getdate=value;
          if (getdate.search(/^[0-9]{4}-(0[1-9]|[1-9]|1[0-2])-((0[1-9]|[1-9])|1[0-9]|2[0-9]|3[0-1]) ((0[1-9]|[1-9])|1[0-9]|2[0-4]):((0[1-9]|[1-9])|[1-5][0-9]):((0[1-9]|[1-9])|[1-5][0-9])$/)==-1) // 判断输入格式时候正确
          {
             flag=false;
          }
          else
          {
              var year=getdate.substr(0,getdate.indexOf(&#39;-&#39;))  // 获得年
              // 下面操作获得月份
          var transition_month=getdate.substr(0,getdate.lastIndexOf(&#39;-&#39;));
          var month=transition_month.substr(transition_month.lastIndexOf(&#39;-&#39;)+1,transition_month.length);
          if (month.indexOf(&#39;0&#39;)==0)
          {
          month=month.substr(1,month.length);
          }
          // 下面操作获得日期
          var day=getdate.substr(getdate.lastIndexOf(&#39;-&#39;)+1,getdate.length);
          if (day.indexOf(&#39;0&#39;)==0)
          {
          day=day.substr(1,day.length);
          }
              if ((month==4 || month==6 || month==9 || month==11) && (day>30)) // 4,6,9,11月份日期不能超过30
              {
                flag=false;
              }
          if (month==2)  // 判断2月份
          {
            if (LeapYear(year))
            {
              if (day>29 || day<1){ flag=false; }
            }
            else
            {
              if (day>28 || day<1){flag=false; }
            }
          }
          else
          {
          flag=true;
          }
        }
       if (flag==false)
       {
          alert(message+"!\n"); //为空时出现的提示
          name.focus();
          name.select();
          return false;
       }
      }
      //判断是否闰年
//参数    intYear 代表年份的值
//return  true: 是闰年  false: 不是闰年
function LeapYear(intYear) {
  if (intYear % 100 == 0)
  {
    if (intYear % 400 == 0) { return true; }
  }
  else {
    if ((intYear % 4) == 0) { return true; }
  }
  return false;
}

    // ===============判断电话，可以为空================ //
    if (type.indexOf("tel")!=-1)
    {
      if (name.value!="")
      {
            if (value.search(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{8}$/)==-1 && value.search(/^(\([0-9]{4}\)|[0-9]{4}-)[0-9]{7}$/)==-1)
     {
       alert(message+"!\n");
             name.focus();
       name.select();
       return false;
      }
      }
    }
   
    // ===============判断电话，不能为空================ //
    if (type.indexOf("r_tel")!=-1)
    {
      if (name.value=="")
      {
       alert(message+"!\n");
       name.focus();
       name.select();
       return false;
      }
      if (value.search(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{8}$/)==-1 && value.search(/^(\([0-9]{4}\)|[0-9]{4}-)[0-9]{7}$/)==-1)
      {
        alert(message+"!\n");
        name.focus();
       name.select();
       return false;
      }
    }
   
    // ===============判断手机，可以为空================ //
    if (type.indexOf("mod")!=-1)
    {
      if (name.value!="")
      {
           if (value.search(/^[0-9]{11}$/)==-1)
    {
      alert(message+"!\n");
            name.focus();
      name.select();
      return false;
    }
      }
    }
   
    // ===============判断手机，不能为空================ //
    if (type.indexOf("r_mod")!=-1)
    {
      if (name.value=="")
      {
      alert(message+"!\n");
      name.focus();
      name.select();
      return false;
       }
      if (value.search(/^[0-9]{11}$/)==-1)
      {
     alert(message+"!\n");
           name.focus();
     name.select();
     return false;
       }
    }
   
    // ===============判断街道================ //
    if (type.indexOf("city")!=-1)
    {
      if (name.value!="")
      {
           if (value.search(/^.{1,}(市|镇|乡).{1,}(路|街|道).{1,}号.{0,}$/)==-1)
     {
        alert(message+"!\n");
              name.focus();
        name.select();
        return false;
      }
       }
    }
   
    // ===============判断街道，不能为空================ //
    if (type.indexOf("r_city")!=-1)
    {

       if (name.value=="")
       {
      alert(message+"!\n");
      name.focus();
      name.select();
      return false;
       }

       if (value.search(/^.{1,}(市|镇|乡).{1,}(路|街|道).{1,}号.{0,}$/)==-1)
       {
      alert(message+"!\n");
            name.focus();
      name.select();
      return false;
       }
    }
      }
   }
}




// ------------------本系统函数--------------------
function dh()
{
  var a=dh.arguments;
  var i;
  for (i=0;i<a.length;i++)
  {
     eval("window.top.nav.document."+a[i]+ ".src=&#39;Images/Top/btn_"+a[i]+".jpg&#39;");
  }
}
// ＝＝＝颜色＝＝＝
var main_tr_onmouseover="#E4EFFC"; // 主题main的tr鼠标移动onmouseover上来时的颜色

// ＝＝＝打印功能＝＝＝
var gLoadFinished = true; // 检测页面加载标记
var gDataGridName = "id"; // 要打印的内容的名称
var Title="s";
      // 打开JustPrint(TM) 打印服务窗口
function OpenJustPrintDlg()
{
  window.open(&#39;JustPrintService.aspx&#39;,&#39;_blank&#39;,"left=0,top=0,width=520,height=350,status=yes,resizable=no,directories=no,location=no,menubar=no,scrollbars=no,titlebar=no,toolbar=no");
        
}
在我纯真年少時,有一個女生,她願意爲我失去生命,她意志堅定地說:你再纏著我,我就去死! 在我負笈外地時,有一個女生,她願意等我到下輩子,她溫柔婉約地說:你想成爲我男友?等下輩子!! 在我窮困潦倒時,有一個女生,她願意與我共赴黃泉,她眨著紅眼說:你再不還錢,我和你同歸于盡!

TOP

haicao

技术核心组

Rank: 8Rank: 8

E.S.T核心成员 项目主管

帖子
428 
精华
24 
积分
5194 
阅读权限
200 
性别
男 
在线时间
164 小时 
注册时间
2004-10-5 
最后登录
2008-7-13 

软件研发奖 技术活跃奖 原创技术奖

6楼 大 中 小 发表于 2006-9-27 14:42  只看该作者
用法:
复制内容到剪贴板
代码:
<input type="submit" name="Submit4" value="提交" onclick="return vdf(&#39;uname&#39;,&#39;请正确输入您的姓名&#39;,&#39;r_china&#39;,&#39;tel&#39;,&#39;请正确输入您的电话&#39;,&#39;r_num_char&#39;,&#39;address&#39;,&#39;请正确输入您的联系地址&#39;,&#39;r&#39;,&#39;postnum&#39;,&#39;请正确输入邮编&#39;,&#39;&#39;)">
在我纯真年少時,有一個女生,她願意爲我失去生命,她意志堅定地說:你再纏著我,我就去死! 在我負笈外地時,有一個女生,她願意等我到下輩子,她溫柔婉約地說:你想成爲我男友?等下輩子!! 在我窮困潦倒時,有一個女生,她願意與我共赴黃泉,她眨著紅眼說:你再不還錢,我和你同歸于盡!

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题