web表单页面自动校验

和web页面打交道，免不了大量的表单校验，用IE支持自定义属性,可以实现表单页面自动校验，提高我们的开发效率

自定义的classe属性为required 为表单必填项，datatype属性为number 和date对数字和日期校验

alt属性为警告提示说明，datamodel为数值校验的大小及位数"####.##"

例如：

ValidateNull(form);

<input type="text" maxlength="10" size="10" name="csrq" alt="出生日期" classe="required" />

<input type="text" maxlength="10" size="10" name="csrq" alt="出生日期" classe="required" datatype ="date">

<input type="text" maxlength="30" size="30" name="yb" alt="邮编" class="required" datatype ="number" datamodel="####.##"/>

同样对选择项，单选项有效

 

function  ValidateNull(form) ... {
//日期和数字用的比较多
  var prop;
  var bdate="date";
  var bnumber="number";
  var bnumbermodel="numbermodel";
  for(var i=0;i< form.elements.length;i++)...{
      prop = form.elements[i];
    if(prop.name!="")...{
      if(prop["className"]=="required")...{
        if(isEmpty(prop["value"]))...{
             alert("""+prop["alt"]+"""+"不可为空！");
            prop.focus();
        return false;
      }

//单选项校验
      if(prop["type"].toLowerCase()=="checkbox" && prop["checked"]==false)...{
        alert("""+prop["alt"]+"""+"不可为空！");
        return false;
      }
   }
   if(!isEmpty(prop["value"]))...{
       //整数校验
       if(prop.datatype==bnumber)...{
           if(!isEmpty(prop["value"]))...{
               if(!isNumberPatten(prop["value"],prop.datamodel))...{
                   alert("""+prop["alt"]+"""+"格式必须为"+prop.datamodel+"!");
                  prop.focus();             
                  return false;
            }               
           }          
      }
       //日期校验
      if(prop.datatype==bdate)...{
           if(!isEmpty(prop["value"]))...{
              if(!isDate(prop["value"]))...{                   
                  alert("""+prop["alt"]+"""+'格式必须为"YYYY-MM-DD",如2008-01-01!');
                  prop.focus();             
                  return false;
            }               
           }          
      }  
    }    
   }
  }
  return ValidateLength(form);
}
function  ValidateLength(form) ... {
 var prop;
 var comment = null;
 var maxlength = null;
  for(var i=0;i< form.elements.length;i++)...{
    prop = form.elements[i];
    if(prop.type=="text")...{
      if(prop.alt==null || prop.alt.length!=0)...{
    comment = prop.alt;
      }
      if(prop.title==null || prop.title.length!=0)...{
    comment = prop.title;
      }
      if(comment==null)...{
    comment='';
      }
      /**//*if(typeof prop.maxlength == "undefined"){*/
    maxlength = prop.maxLength;
      /**//*}else{
    maxlength = prop.maxlength;
      }*/

      if(maxlength!=null)...{
     if(getByteLength(prop.value)>maxlength)...{
      if(comment.length==0)...{
        alert("未知名字段长度不能大于"+maxlength + "位(中文字算2位)");
        prop.focus();
        prop.select();
        return false;
      }else...{
        alert('"'+comment+'"长度不能大于'+maxlength + "位(中文字算2位)");
        prop.focus();
        prop.select();
        return false;
      }
    }
      }
    }
  }
  return true;
}
function  isEmpty(sString) ... {
    var s = allTrim(sString);
    if (s.length < 1)
        return true;
    else
        return false;
}
function  lTrim(sString)
... {
    var i;
    if (sString.length < 1)
        return "";
    for (i = 0; i < sString.length; i++)
        if (sString.charAt(i) != " ")
            break;
    if (i >= sString.length)
        return("");
    else
        return(sString.substring(i, sString.length));
}
function  rTrim(sString)
... {
    var i;
    if (sString.length < 1)
        return "";
    for (i = (sString.length - 1); i >= 0; i--)
        if (sString.charAt(i) != " ")
            break;
    if (i < 0)
        return("");
    else
        return(sString.substring(0, i + 1));
}
function  allTrim(sString)
... {
    if (sString.length < 1)
        return "";
    var dString = lTrim(sString);
    dString = rTrim(dString);
    return dString;
}
function  isNumberPatten(src,sPatten) ... {
  var arr;
  arr = sPatten.split(".");
  if(arr.length==1)...{
      return isNumber(src,arr[0].length,0);
  }else...{
      return isNumber(src,arr[0].length+arr[1].length,arr[1].length);
  }

} function  isNumber(src,precision,scale) ... {
  var integer_part = precision - scale;

  if (integer_part < 0 || precision < 0 || scale < 0)
          return false;

  var patten;

  if (scale > 0) ...{
    patten = "^-?/d{1," + integer_part + "}(/./d{1," + scale + "})?$";
  }
  else ...{
    patten = "^-?/d{1," + integer_part + "}$";
  }

  return Matchs(src, patten);
}

function  Matchs(src,patten) ... {
  var re;                     // 声明变量。
  re = new RegExp(patten,"g");  // 创建正则表达式对象。
  return re.test(src);
}
// 日期格式：YYYY-MM-DD
function  isDate(strDate) ... {
   var strSeparator = "-"; //日期分隔符
   var strDateArray;
   var intYear;
   var intMonth;
   var intDay;
   var boolLeapYear;

   strDateArray = strDate.split(strSeparator);
   if(strDateArray.length!=3) return false;

   // 月日的长度必须是2
   if(strDateArray[1].length!=2) return false;
   if(strDateArray[2].length!=2) return false;

   intYear = parseInt(strDateArray[0],10);
   intMonth = parseInt(strDateArray[1],10);
   intDay = parseInt(strDateArray[2],10);

   if(isNaN(intYear)||isNaN(intMonth)||isNaN(intDay)) return false;

   if(intMonth>12||intMonth<1) return false;

   if((intMonth==1||intMonth==3||intMonth==5||intMonth==7||intMonth==8||intMonth==10||intMonth==12)&&(intDay>31||intDay<1)) return false;

   if((intMonth==4||intMonth==6||intMonth==9||intMonth==11)&&(intDay>30||intDay<1)) return false;

   if(intMonth==2)...{
      if(intDay<1) return false;

      boolLeapYear = false;
      if((intYear%100)==0)...{
     if((intYear%400)==0) boolLeapYear = true;
      }
      else...{
     if((intYear%4)==0) boolLeapYear = true;
      }

      if(boolLeapYear)...{
     if(intDay>29) return false;
      }
      else...{
     if(intDay>28) return false;
      }
   }
   return true;
}