用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后，就可实现验证它。