不错的form javascript validator

本文介绍了一种使用自定义属性validChar和isRequired简化JavaScript表单验证的方法。通过遍历表单元素并与正则表达式匹配来实现对文本框的有效性和必填性的检查。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   以前每有单验证,都会写很多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}"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值