不错的form javascript validator

   以前每有单验证，都会写很多javascript，而且是重复的，现在找到一种很简单的方法，分享给大家，也忘记是哪个网友贴 的，反正谢谢了。
        这里主要是给input标签自定义两个validChar , isRequired attribute,然后在javascript里遍历form element,不废话了，code 贴来看看就知道了
---------------------------------------------------------------------------------------------------------------------------------------------------
LZValidator.html
---------------------------------------------------------------------------------------------------------------------------------------------------

  <% ... @ page contentType = " text/html; charset=UTF-8 " %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title > JavaScript验证表单字段 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
</ head >
< script  type ="text/javascript" > ...
/**/ /* *
* 提交前检查
*/
function  check(vform) ... {
     //  遍历表单中每个表单域
     for ( var  i = 0 ;i < vform.elements.length;i ++ ) ... {        
         if (vform.elements[i].type == " text " ) ... {
             //  如果表单域是文本框的话,进行定义好的验证
            
             //  取得验证结果
             var  checkResult = checkTextBox(vform.elements[i]);
             // alert(checkResult);
   
             //  取得文本框名
             var  name = vform.elements[i].getAttribute( " name " );
           
             if (checkResult) ... {
                 //  验证通过
                document.getElementById(name + " Msg " ).className = " feedbackHide " ;
            }
             else ... {       
                 //  验证不通过，显示提示文字并置焦点   
                document.getElementById(name + " Msg " ).className = " feedbackShow " ;
                 var  mesg = document.getElementById(name + " Msg " ).innerHTML;
                alert(mesg);
                vform.elements[i].focus();
                 return   false ;
            }                
        }
    }
 
     return   true ;
}

/**/ /* *
* 检查文本框
*/
function  checkTextBox(vTextBox) ... {
     //  取得文本框中允许输入的合法文字正则表达式
     var  validChar = vTextBox.getAttribute( " validChar " );
   
     //  取得文本框中是否必须检查的标志
     var  isRequired = vTextBox.getAttribute( " isRequired " );
   
     //  取得文本框的输入
     var  inputValue = vTextBox.value;
   
     if (isRequired != " true "   &&  inputValue.length < 1 ) ... {
         //  如果是非必填字段且没有输入则返回真
         return   true ;
    }
     else ... {
         //  否则进行正则表达式验证
         // alert("表达式为"+validChar);
         // alert("验证的字符串为"+inputValue);
         var  regexStr = " ^ " + validChar + " $ " ;
         var  regex = new  RegExp(regexStr);
         return  regex.test(inputValue);
    }
}
</ script >

< style  type ="text/css" > ...
<!--
.feedbackShow {...} {
visibility :  visible ;
}

.feedbackHide {...} {
visibility :  hidden ;
}
-->
</ style >


< body >
     < div  id ="bodyDiv" >
         < div  id ="header" >
             < jsp:include  page ="/web/page/branch/header.jsp" />
         </ div >
         < div  id ="sidebar" >
             < jsp:include  page ="/web/page/branch/sidebar.jsp" />
         </ div >
         < div  id ="content" >
             <!--  外层表格，比内表格宽，以在左右留出一定空当  -->
             < table cellspacing ="0"  cellpadding ="0"   width ="630"  align ="center"  border ="0" >
                 < tr  bgcolor ="#eaecf5"  height ="25" >
                 < td  colspan =3 > &nbsp; < font  face =webdings  color =#ff8c00 > 8 </ font >< b > &nbsp;
                                    请填入个人信息 </ b ><  /td >
                 </ tr >
                 < tr  bgcolor =#236d78  height =1 >< td ></ td ></ tr >
                 < tr  bgcolor =#eaecf5  >
                 < td  bgcolor =#ffffff >
                   <!--  内置表格，居中,比外表格窄，  -->
                   < form  action ="#"  onsubmit ="return check(this);" >
                   < table  width =560  align =center  border =0 >
                     < tbody >
                       < tr >
                         < td  width =70 > 员工号: </ td >
                         < td >
                             < input  type ="text"
                                   name ="code"
                                   validChar ="d{4}"

评论

1 楼 alert_mm 2008-04-28  

嗯！好好学习，天天向上