使用javascript进行表单验证

js代码如下:

    <script language="javascript">  
    function checkUserName(username){  
        if(username.length == 0){    
            document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";    
            form1.username.focus();    
            return false;    
        }   
        var msg ="<img src='images/icn_ok.gif' style='width:12px'>";    
        var patn =   /^[a-zA-Z]+[a-zA-Z0-9]+$/;    
        if(!patn.test(username)){    
            document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>";    
            form1.username.focus();    
            return false;    
        }  
        var span = document.getElementById("usernameErr");    
        span.innerHTML = msg;    
        return msg == "<img src='images/icn_ok.gif' style='width:12px'>";     
        document.getElementById("usernameErr").innerHTML = "";        
        return true;    
    };    
        
    function checkPwd(str){  
        var msg ="<img src='images/icn_ok.gif' style='width:12px'>";    
        if(str.length<3 || str.length>18){    
            document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>";    
            form1.password.focus();    
            return false;    
        }    
        if(escape(str).indexOf("%u")!=-1){    
            document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>";    
            form1.password.focus();    
            return false;    
        }  
        var span = document.getElementById("passwordErr");    
        span.innerHTML = msg;    
        return msg == "<img src='images/icn_ok.gif' style='width:12px'>";    
       document.getElementById("passwordErr").innerHTML = "";    
       return true;    
    };    
        
    function confrimPwd(str){  
        var msg ="<img src='images/icn_ok.gif' style='width:12px'>";    
        var pwd = document.form1.password.value;    
        if(str!=pwd){         
            document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>";    
            form1.password2.value="";    
            form1.password2.focus();    
            return false;    
        }   
        var span = document.getElementById("password2Err");    
        span.innerHTML = msg;    
        return msg == "<img src='images/icn_ok.gif' style='width:12px'>";   
       document.getElementById("password2Err").innerHTML = "";    
       return true;    
    };    
        
    function checkEmail(email){   
       var msg ="<img src='images/icn_ok.gif' style='width:12px'>";     
       var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$");    
       if(!reg.test(email)){    
         document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>";    
         form1.email.focus();                   
         return false;    
       }    
        var span = document.getElementById("emailErr");    
        span.innerHTML = msg;    
        return msg == "<img src='images/icn_ok.gif' style='width:12px'>";        
        document.getElementById("emailErr").innerHTML = "";    
        return true;    
        
    };    
        
    function checkTel(tel){    
        var msg ="<img src='images/icn_ok.gif' style='width:12px'>";      
        var i,j,strTemp;    
        strTemp="0123456789-()#";    
        for(i=0;i<tel.length;i++){    
          j=strTemp.indexOf(tel.charAt(i));    
          if(j==-1){    
            document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>";    
            form1.tel.focus();      
            return false;    
          }    
        }  
        var span = document.getElementById("telErr");    
        span.innerHTML = msg;    
        return msg == "<img src='images/icn_ok.gif' style='width:12px'>";   
        document.getElementById("telErr").innerHTML = "";    
        return true;    
    };    
        
    function checkForm(){       
        if(document.form1.username.value.length == 0){    
            document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";    
            form1.username.focus();    
            return false;    
        }    
        if(document.form1.password.value.length == 0){    
            document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>";    
            form1.password.focus();    
            return false;    
        }    
        if( !(form1.sex[0].checked || form1.sex[1].checked) ){    
            document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>";    
            form1.sex[0].focus();    
            return false;    
        }              
        document.getElementById("usernameErr").innerHTML = "";    
        document.getElementById("passwordErr").innerHTML = "";    
        document.getElementById("sexErr").innerHTML = "";    
        return true;    
        
    };      
    </script>   

HTML代码如下:

    <tr>    
          <th scope="row">用户名:<font color="#FF0000">*</font></th>    
          <td>      
           <input type="text" name="username" onBlur="return checkUserName(this.value);" />    
           <span id="usernameErr"></span>    
          </td>    
        </tr>    


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值