您的位置：首页 > Web前端 > JavaScript

JavaScript+正则表达式 完成简单表单验证

2012-10-13 18:05 309 查看

自己写了个简单表单验证：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script language="javascript">
function checkUserNum(str){
if(str.length<3 || str.length>18){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>";
form1.password.focus();
return false;
}
var flag = str.match(/\D/)==null;
if(!flag==true){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>";
form1.usernum.focus();
return false;
}
document.getElementById("usernumErr").innerHTML = "";
return true;
};

function checkUserName(username){
if(username.length == 0){
document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>";
form1.username.focus();
return false;
}
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;
}
document.getElementById("usernameErr").innerHTML = "";
return true;
};

function checkPwd(str){
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;
}
document.getElementById("passwordErr").innerHTML = "";
return true;
};

function confrimPwd(str){
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;
}
document.getElementById("password2Err").innerHTML = "";
return true;
};

function checkEmail(email){
if(email==""){
document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
form1.email.focus();
return false;
}
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;
}

document.getElementById("emailErr").innerHTML = "";
return true;

};

function checkTel(tel){

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;
}
}
document.getElementById("telErr").innerHTML = "";
return true;
};

function checkForm(){

if(document.form1.usernum.value.length == 0){
document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>";
form1.usernum.focus();
return false;
}
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;
}
if(document.form1.email.value==""){
document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";
form1.email.focus();
return false;
}
document.getElementById("usernumErr").innerHTML = "";
document.getElementById("usernameErr").innerHTML = "";
document.getElementById("passwordErr").innerHTML = "";
document.getElementById("sexErr").innerHTML = "";
document.getElementById("emailErr").innerHTML = "";
return true;

};

</script>
</head>

<body>

<form name="form1" action="#" method="post" onsubmit="return checkForm();" >

<table width="0" border="1">
<tr>
<th scope="row">UserNumber:</th>
<td>
<input type="text" name="usernum" onblur="return checkUserNum(this.value);" />
<span id="usernumErr"></span>
</td>
</tr>
<tr>
<th scope="row">UserName:</th>
<td>
<input type="text" name="username" onblur="return checkUserName(this.value);" />
<span id="usernameErr"></span>
</td>
</tr>
<tr>
<th scope="row">PassWord:</th>
<td>
<input type="password" name="password" onblur="return checkPwd(this.value);" />
<span id="passwordErr"></span>
</td>
</tr>
<tr>
<th scope="row">ConfirmPassword:</th>
<td>
<input type="password" name="password2" onblur="return confrimPwd(this.value);" />
<span id="password2Err"></span>
</td>
</tr>
<tr>
<th scope="row">sex</th>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<span id="sexErr"></span>
</td>
</tr>
<tr>
<th scope="row">Email:</th>
<td>
<input type="text" name="email" onblur="return checkEmail(this.value);" />
<span id="emailErr"></span>
</td>
</tr>
<tr>
<th scope="row">Tel:</th>
<td>
<input type="text" name="tel" onblur="return checkTel(this.value);" />
<span id="telErr"></span>
</td>
</tr> <tr>
<th scope="row"> </th>
<td> </td>
</tr>
<tr>
<th scope="row"><input type="submit" value="submit" /></th>
<td><input type="reset" value="reset" /></td>
</tr>
</table>

</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航