很酷的一个日历(Javascript+VML)- -| 回首页 | 2004年索引 | - -在b/s开发中经常用到的javaScript技术

自动校验表单中的数据- -

                                      

自动校验表单中的数据

在Web应用程序的输入表单中,很多东西需要被校验。比如,某一项必须填写或者某个条目必须只能是数字;只能以某个标准的格式获取数据;文字框里的省略符需要被擦除以防导致SQL错误等等。

  

       也许你的Web应用程序只有少数几个输入表单,那么用脚本语言进行复杂的编码来完成确认工作是可行的。但是如果摆在你面前的是拥有数以百计表单的应用程序,要为每个条目都提供合法性检查,噢,真可怕。没关系,下面我将提供一个自动校验form中所有元素的代码,用它来自动进行校验工作,附件中是源码。

      你所要做的工作:

         包含提供的JS
         在Form的元素中定义所要校验的规则
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT  name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT  name=text1 Pattern="date" ElName="我的日期">
<p>
字符串:<INPUT  name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="button"   id=button1 name=button1 value="校验一下数据">
</form>



============================================



<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>


<P>
<form name=MyForm >
整型数据


自动校验表单中的数据

在Web应用程序的输入表单中,很多东西需要被校验。比如,某一项必须填写或者某个条目必须只能是数字;只能以某个标准的格式获取数据;文字框里的省略符需要被擦除以防导致SQL错误等等。

  

       也许你的Web应用程序只有少数几个输入表单,那么用脚本语言进行复杂的编码来完成确认工作是可行的。但是如果摆在你面前的是拥有数以百计表单的应用程序,要为每个条目都提供合法性检查,噢,真可怕。没关系,下面我将提供一个自动校验form中所有元素的代码,用它来自动进行校验工作,附件中是源码。

      你所要做的工作:

         包含提供的JS
         在Form的元素中定义所要校验的规则
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT  name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT  name=text1 Pattern="date" ElName="我的日期">
<p>
字符串:<INPUT  name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="button"   id=button1 name=button1 value="校验一下数据">
</form>



============================================



<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>


<P>
<form name=MyForm >
整型数据:<INPUT id=text1 name=text1 Pattern="number" ElName="test">
<p>
浮点数:<INPUT  name=text1 Pattern="float" ElName="我的浮点数">
<p>
日期:<INPUT  name=text1 Pattern="date" ElName="我的日期" NotNull=1>
<p>
字符串:<INPUT  name=text1 Pattern="string" MaxLen=3 ElName="我的串串">
<p>
<input type="submit" id=button1 name=button1 value="校验一下数据">
</form>
</P>


<script>
/**
* 应用举例:
* <input type=text Pattern="number" ElName="test" [MaxLen=20]>
* 指定Pattern和ElName
* 目前支持的Pattern:number、float、date、string
* 其中string必须指定MaxLen的属性
* @return
*/

/**
* 应用举例:
* <input type=text Pattern="number" ElName="test" [MaxLen=20]>
* 指定Pattern和ElName
* 目前支持的Pattern:number、float、date、string
* 其中string必须指定MaxLen的属性
* @return
*/

/**
* 去掉字符串中两边的空格
* @param s            字符串
* @return            返回已经去掉两边空格的字符串
*/
function trim(s){
    var iFirst = 0;
    var iLast = s.length - 1;
    var sTrimChars = ' \t';
    while ( (iFirst < iLast) && (sTrimChars.indexOf(s.charAt(iFirst)) != -1) ) iFirst++;
    while ( (iLast >= iFirst) && (sTrimChars.indexOf(s.charAt(iLast)) != -1) ) iLast--;
    return s.substring(iFirst, iLast + 1);
}

/**
* 校验字符串是否为空
* @param _sCode    待校验的字符串ID
* @return            如果是,返回true,否则返回false
*/
function test_null(_sCode) {
  _sCode = trim(_sCode);
  var nLen = getRealLen(_sCode);
  if(nLen==0)return false;
  return true;
}


/**
* 校验字符串是否小于指定的长度
* @param _sCode    待校验的字符串ID
* @param _nLen        指定的最大长度
* @return            如果是,返回true,否则返回false
*/
function test_string_len(_sCode, _nLen) {
  if(isNaN(_nLen))return true;
  _sCode = trim(_sCode);
  var nLen = getRealLen(_sCode);
  if(nLen==0)return true;
    
  if(nLen>parseInt(_nLen))return false;
  else return true;  
}

/**
* 校验字符串是否为特定长度的整数
* @param _sCode    待校验的字符串ID
* @return            如果是,返回true,否则返回false
*/
function test_number_len(_sCode, _nLen) {
  _sCode = trim(_sCode);
  var nLen = _sCode.length;
  if(nLen==0)return true;
  
  //var myReg = new RegExp("^[1-9][0-9]{"+(nLen-1)+"}");
  var myReg = new RegExp("^[1-9][0-9]{"+(_nLen-1)+"}$");
  if(myReg.test(_sCode)) return true;
  return false;
}

/**
* 校验字符串是否为20位的整数
* @param _sCode    待校验的字符串ID
* @return            如果是,返回true,否则返回false
*/
function test_number(_sCode) {
  _sCode = trim(_sCode);
  var nLen = _sCode.length;
  if(nLen==0)return true;
  
  //var myReg = new RegExp("^[1-9][0-9]{"+(nLen-1)+"}");
  var myReg = new RegExp("^[1-9][0-9]{0,19}$");
  if(myReg.test(_sCode)) return true;
  return false;
}

/**
* 校验字符串是否为浮点数
* @param _sCode    待校验的字符串ID
* @return            如果是,返回true,否则返回false
*/
function test_float(_sCode) {
  _sCode = trim(_sCode);
  var nLen = _sCode.length;
  if(nLen==0)return true;
  
  var nLen = _sCode.length;
  //查找整数的长度
  var nPose = _sCode.indexOf(".");
  var myReg ;
  if(nPose<1)return test_number(_sCode);
  if(nPose==1){
    myReg = new RegExp("^[0-9]\.[0-9]{"+(nLen-nPose-1)+"}");     
  }else{
    myReg = new RegExp("^[1-9][0-9]{"+(nPose-1)+"}\.[0-9]{"+(nLen-nPose-1)+"}");
  }
  
  if(myReg.test(_sCode)) return true;
  return false;
}        


/**效验是否是瑞年**/
function isLeapYear(year){
    if((year%4==0&&year%100!=0)||(year%400==0)){
        return true;
    }
    return false;
}

/**
* 校验字符串是否为指定格式的日期
* @param _sCode    待校验的字符串ID
* @return            如果是,返回true,否则返回false
*/
function test_date(object, format){
    object = trim(object);
    var nLen = object.length;
    if(nLen==0)return true;
    
    var regexp,value,index, sDesc;
    var year,month,day;
    var iyear,imonth,iday;
    var fmt,regfmt,ordfmt,fmtDesc;
    var dateArray;

    if(object==null)return false;
    if(format==null)return false;
    
    value = object;
    
    

    fmt=new Array("yyyy/mm/dd",
                  "mm/dd/yyyy",
                  "dd/mm/yyyy",
                  "yyyy-mm-dd",
                  "mm-dd-yyyy",
                  "dd-mm-yyyy");
    fmtDesc=new Array("年/月/日(例如:2002/12/24)",
                  "月/日/年(例如:12/24/2002)",
                  "日/月/年(例如:24/12/2002)",
                  "年-月-日(例如:2002-12-24)",
                  "月-日-年(例如:12-24-2002)",
                  "日-月-年(例如:24-12-2002)");                  

    regfmt=new Array("^([0-9]{4})\/([0-9]{2})\/([0-9]{2})$",
                    "^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$",
                    "^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$",
                    "^([0-9]{4})\-([0-9]{2})\-([0-9]{2})$",
                    "^([0-9]{2})\-([0-9]{2})\-([0-9]{4})$",
                    "^([0-9]{2})\-([0-9]{2})\-([0-9]{4})$");

    ordfmt=new Array("123","312","321", "123","312","321");

    format=format.toLowerCase();
    for(index=0;index<fmt.length;index++){
        if(format==fmt[index]){
            regexp = new RegExp(regfmt[index]);
            sDesc  = fmtDesc[index];
            iyear=parseInt(ordfmt[index].charAt(0));
            imonth=parseInt(ordfmt[index].charAt(1));
            iday=parseInt(ordfmt[index].charAt(2));
            break;
        }
    }

    if(index==fmt.length){
        alert("Date Format Not Supported!");
        return false;
    }

    if(regexp.test(value)){
        dateArray=value.match(regexp);

        year=dateArray[iyear];
        month=dateArray[imonth];
        day=dateArray[iday];

        //alert("The Date you have filled is:\nYear:"+year+"\nMonth:"+month+"\nDay:"+day);

        if(year<1949){
            alert("[年]必须大于1949!");
            return false;
        }
        
        if(month<0||month>12){
            alert("[月]必须在1-12之间!");
            return false;
        }//end month

        if(day<0||day>31){
            alert("[天]必须在1-31之间!");
            return false;
        }else{
            if(month==2){
                if(isLeapYear(year)&&day>29){
                    alert("瑞年的二月必须在1-29之间!");
                    return false;
                }
                if(!isLeapYear(year)&&day>28){
                    alert("二月必须在1-28之间!");
                    return false;
                }    
            }//end 2 month
            if((month==4||month==6||month==9||month==11)&&(day>30)){
                alert("当前的月份必须在1-30之间!");
                return false;
            }//end 30days
        }//end day

    }else{
        alert("日期的格式不正确!\n正确的日期格式:"+sDesc);
        return false;
    }//end formate
    return true;
}

/** 获取字符串的长度(一个中文相当于2个英文) **/
function  getRealLen( str) {
    var totallength=0;
    for (var i=0; i < str.length;i++){
        var intCode=str.charCodeAt(i);
        if (intCode>=0&&intCode<=128) {
            totallength=totallength+1;    //非中文单个字符长度加 1
        }else {
            totallength=totallength+2;    //中文字符长度则加 2
        }
    } //end for
    return totallength;    
} //英文字符和中文字符长度的比较



function ValidForm(){
    //暂时封掉接口
    //return true;

    var thisForm = window.event.srcElement;    
    if(thisForm==null)return false;

    var arEls = thisForm.elements;//表单中所有数据
    var bValid = false;//记录是否通过效验
    var sMsg = ""; //记录提示信息

    for(var i = 0;i<arEls.length;i++){
        if(arEls[i].NotNull){
            if(!test_null(arEls[i].value)){
                sMsg += (sMsg.length>1?"\n":"")+"【"+arEls[i].ElName+"】必须填写!\n";
                bValid = true;
                continue;
            }
        }

        if(!arEls[i].Pattern)continue;
        
        switch(arEls[i].Pattern.toLowerCase()){
            case "number":
                if(arEls[i].NumLen){
                    if(!test_number_len(arEls[i].value, arEls[i].NumLen)){
                        sMsg += (sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
                        bValid = true;
                    }
                }else{
                    if(!test_number(arEls[i].value)){
                        sMsg += (sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
                        +"【"+arEls[i].value+"]不是整数!";
                        bValid = true;
                        
                    }
                }
                break;
            case "float":
                if(!test_float(arEls[i].value)){
                    sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
                    +"【"+arEls[i].value+"]不是浮点数!";
                    bValid = true;
                }
                break;
            case "string":
                if(arEls[i].MaxLen){
                    if(!test_string_len(arEls[i].value, arEls[i].MaxLen)){
                        sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
                        +"长度超出了最大范围:"+arEls[i].MaxLen+"个字符!";
                        bValid = true;
                    }
                }
                break;
            case "date":                
                if(!test_date(arEls[i].value, "yyyy-mm-dd")){
                    sMsg +=(sMsg.length>1?"\n\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!\n"
                    +"【"+arEls[i].value+"]不符合正常的日期格式[2003-12-24]!";
                    bValid = true;
                }
                break;
            default:
                break;
        }

        /*if(!test.IsValid(arEls[i].value, arEls[i].Pattern)){
            sMsg +=(sMsg.length>1?"\n":"")+"【"+arEls[i].ElName+"】数据为非法数据!";
            bValid = true;
        }*/
    }
    if(bValid)alert(sMsg);
    return !bValid;
}

if(document.forms.length>0)document.forms[0].onsubmit = ValidForm;
</script>

</BODY>
</HTML>

- 作者: 香山叶 2004年10月21日, 星期四 13:36 加入博采

Trackback

你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=167365

回复

评论内容: