javascript验证表单form的通用函数

 

本文作者：草上飞 如需转载，请注明转载地址。

原文地址： http://blog.csdn.net/caoshangfei/archive/2007/04/01/1548160.aspx

做web开发的时候，相信大家都会遇到一个比较麻烦的问题。如在做一个form提交的时候，需要验证很多东西。如验证必填项是否填写、该填数字的是否填写了数字、应该为日期型的是否为日期型等等。如果一个form有10几个文本框或者几十个文本框的时候，我想这个工作量还是挺大的。我做项目的时候，就经常遇到这样的问题，为了偷偷懒，自己写了个javascript函数供自己使用，用起来比以前快多了。大家可以直接通过以下链接下载下面的两个文件。

文件1： check.js 请点右键另存为

文件2： test.html 点击右键为下载，直接进入为看演示结果

实现如下：

name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-1466660535697685&dt=1195090273437&lmt=1195090273&prev_fmts=728x15_0ads_al_s%2C728x90_as&format=336x280_as&output=html&correlator=1195090273437&url=http%3A%2F%2Fwww.newbooks.com.cn%2Finfo%2F168077.html&color_bg=FFFFFF&color_text=000000&color_link=000000&color_url=000000&color_border=FFFFFF&ad_type=text&ref=http%3A%2F%2Fwww.newbooks.com.cn&cc=16&ga_vid=1544903916.1195090273&ga_sid=1195090273&ga_hid=1437558649&flash=9&u_h=800&u_w=1280&u_ah=772&u_aw=1280&u_cd=32&u_tz=480&u_java=true" frameborder="0" width="336" scrolling="no" height="280" allowtransparency="allowtransparency">

新建一个check.js文件，文件内容为：
//check.js开始
 //使用方法：在form提交事件里调用：return checkOwnRule(objfrm)；传入参数为当前form对象。使用该函数的前提是页面必须包含check.js
 /**********
 更新日期：2007-4-1
 更新内容：如果没有设置文本框的hint属性，则弹出的警告框中默认显示控件名称。
 *****/
 function checkOwnRule(objfrm){
  var inputObj=objfrm.getElementsByTagName("input");
  for (i=0;i<inputObj.length;i++){
   if (!inputObj(i).getAttribute("hint")||inputObj(i).getAttribute("hint") == "")
   {
    strHint=inputObj(i).name;
   }else{
    strHint=inputObj(i).getAttribute("hint");
   }
 
   if (inputObj(i).getAttribute("allownull")=="false"){ //证明该输入框不允许为空,allow为自己在文本框中定义的属性。如<input type="text" name="UserName" allownull="false" hint="用户名">表示用户名不允许为空。Hint属性最好设置，因为在alert的时候会包含该值。
    if (inputObj(i).value==""){
     alert(strHint+"不能为空！");
     inputObj(i).focus();
     return false;
    }
   }

   //如果某项的class为digital，表示数字项。则检测是否为数字。
   if (inputObj(i).getAttribute("className")=="digital"){
    if (inputObj(i).value!=""&&isNaN(inputObj(i).value)){
     alert(strHint+"必须为数字！");
     inputObj(i).focus();
     return false;
    }
   }
   

   
   if (inputObj(i).getAttribute("isInt")=="true"){ //证明该输入框必须输入整数
    if (inputObj(i).value.indexOf(".")>=0){
     alert(strHint+"必须为整数！");
     inputObj(i).focus();
     return false;
    } 
   }
    
   if (inputObj(i).getAttribute("allowzero")=="false"){ //证明该输入框不允许输入0
    if (inputObj(i).value==0){
     alert(strHint+"不能为0！");
     inputObj(i).focus();
     return false;
    } 
   }     
   //如果isdate为true，表示该项为日期项，则必须输入日期
   if (inputObj(i).getAttribute("isdate")=="true"){
    if (inputObj(i).value!=""&&!checkdate(inputObj(i).value)){
     alert(strHint+"必须为正确的日期格式！");
     inputObj(i).focus();
     return false;
    }
   }
  
  } 
  
  var selectObj=objfrm.getElementsByTagName("select");
  for (i=0;i<selectObj.length;i++){
   if (selectObj(i).getAttribute("allownull")=="false"){ //证明该选择框不允许为空
    if (selectObj(i).value==""){
     alert(strHint+"不能为空！");
     selectObj(i).focus();
     return false;
    }
   }
  }
  return true;
 }
//该函数为检测是否为日期的函数。
function checkdate(str){
 var reg = /^(/d+)-(/d{1,2})-(/d{1,2})$/;
 var r = str.match(reg);
 if(r==null)return false;
 r[2]=r[2]-1;
 var d= new Date(r[1], r[2],r[3]);
 if(d.getFullYear()!=r[1])return false;
 if(d.getMonth()!=r[2])return false;
 if(d.getDate()!=r[3])return false;

 return true;
}
//check.js结束

Html文件中的写法：
<style>

.digital {text-align:right}

</style>

<script language="javascript" src="check.js"></script>

<a href="http://www.newbooks.com.cn">点击进入我的网站</a>

<form name="testform" action="" method="post" οnsubmit="return checkForm(this)">

用户名：<input type="text" name="username" hint="用户名" allownull="false">(必须输入)<br>

日期：<input type="text" name="testdate" hint="日期" allownull="false" isdate="true">(必须输入且为日期型)<br>

金额：<input type="text" name="testamount" hint="金额" allownull="false" class="digital">(必须输入且为数值型)<br>

数量：<input type="text" name="testqty" hint="数量" allownull="false" class="digital" isInt="true" allowzero="false">(必须输入且必须输入整数，且不能输入0)<br>

<input type="submit" value="提交">

</form>

<script language="javascript">

function checkForm(objform){

if (checkOwnRule(objform)){

        return true;

}else{

        return false;

}

}     

</script>