用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>	

上面是验证各个类型的js代码，通过下面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>  

通过这样就可以实现当我们输入username后，就可实现验证它。