注册表单校验

<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Title</title>  
<!--省略CSS样式代码-->
<script>    
function checkAll() {    
//所有的方法都返回true,这个方法才返回true    
return checkUser() && checkMail() && checkPassword() && recheckPassword() && checkNum() && checkBirth();    
}    
function checkUser() {    
//  var right = new RegExp("^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$");    
var s = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;    
var usernameValue = document.getElementById("user").value;    
if (s.test(usernameValue) == false) {    
document.getElementById("userInfo").innerHTML = "用户名格式错误!";    
return false;    
} else {    
document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
function checkPassword() {    
var s = /^[a-zA-Z]\w{5,17}$/;    
var pwdvalue = document.getElementById("pwd").value;    
if (s.test(pwdvalue) == false) {    
document.getElementById("passwordInfo").innerHTML = "密码格式错误!";    
return false;    
} else {    
document.getElementById("passwordInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
function recheckPassword() {    
var s = /^[a-zA-Z]\w{5,17}$/;    
var repwdvalue = document.getElementById("repwd").value;    
if (s.test(repwdvalue) == false) {    
document.getElementById("repasswordInfo").innerHTML = "密码格式错误!";    
return false;    
} else {    
var p = document.getElementById("pwd").value;    
var pp = document.getElementById("repwd").value;    
console.log(p);    
console.log(pp);    
if (p != pp) {    
document.getElementById("repasswordInfo").innerHTML = "两次密码不一致!";    
return false;    
} else {    
document.getElementById("repasswordInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
}    
function checkMail() {    
var s = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;    
var emailValue = document.getElementById("email").value;    
if (s.test(emailValue) == false) {    
document.getElementById("emailInfo").innerHTML = "邮箱格式错误!";    
return false;    
} else {    
document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
function checkNum() {    
var s = /^1[34578]\d{9}$/;    
var numValue = document.getElementById("mobile").value;    
if (s.test(numValue) == false) {    
document.getElementById("numInfo").innerHTML = "手机号格式错误!";    
return false;    
} else {    
document.getElementById("numInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
function checkBirth() {    
var s = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;    
var birthValue = document.getElementById("birth").value;    
if (s.test(birthValue) == false) {    
document.getElementById("birthInfo").innerHTML = "生日格式错误!";    
return false;    
} else {    
document.getElementById("birthInfo").innerHTML = "<img src='img/gou.png' width='15'/>";    
return true;    
}    
}    
</script>    
</head>    
<body>    
<!--用户注册,需要进行如下验证,请在JS中使用正则表达式进行验证。    
1. 用户名:只能由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头    
2. 密码: 大小写字母和数字6-20个字符    
3. 确认密码:两次密码要相同    
4. 电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/    
5. 手机号:/^1[34578]\d{9}$/    
6. 生日:生日的年份在1900~2009之间,生日格式为1980-5-12或1988-05-04的形式,/^((19\d{2})|(200\d))-    
(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/-->    
<form action="server" method="post" id="myform" onsubmit="return checkAll()">    
<table class="main" border="0" cellspacing="0" cellpadding="0">    
<tr>    
<td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td>    
</tr>    
<tr>    
<td class="hr_1">新用户注册</td>    
</tr>    
<tr>    
<td style="height:10px;"></td>    
</tr>    
<tr>    
<td>    
<table width="100%" border="0" cellspacing="0" cellpadding="0">    
<tr>    
<!-- 长度为4~16个字符-->    
<td class="left">用户名:</td>    
<td class="center">    
<input id="user" name="user" type="text" class="in" onblur="checkUser()"/>    
<span style="color: red" id="userInfo"></span>    
</td>    
</tr>    
<tr>    
<!-- 不能为空, 输入长度大于6个字符 -->    
<td class="left">密码:</td>    
<td class="center">    
<input id="pwd" name="pwd" type="password" class="in" onblur="checkPassword()"/>    
<span style="color: red" id="passwordInfo"></span>    
</td>    
</tr>    
<tr>    
<!-- 不能为空, 与密码相同 -->    
<td class="left">确认密码:</td>    
<td class="center">    
<input id="repwd" name="repwd" type="password" class="in" onblur="recheckPassword()"/>    
<span style="color: red" id="repasswordInfo"></span>    
</td>    
</tr>    
<tr>    
<!-- 不能为空, 邮箱格式要正确 -->    
<td class="left">电子邮箱:</td>    
<td class="center">    
<input id="email" name="email" type="text" class="in" onblur="checkMail()"/>    
<span id="emailInfo" style="color: red;"></span>    
</td>    
</tr>    
<tr>    
<!-- 不能为空, 使用正则表达式自定义校验规则,1开头,11位全是数字 -->    
<td class="left">手机号码:</td>    
<td class="center">    
<input id="mobile" name="mobile" type="text" class="in" onblur="checkNum()"/>    
<span id="numInfo" style="color: red;"></span>    
</td>    
</tr>    
<tr>    
<!-- 不能为空, 要正确的日期格式 -->    
<td class="left">生日:</td>    
<td class="center">    
<input id="birth" name="birth" type="text" class="in" onblur="checkBirth()"/>    
<span id="birthInfo" style="color: red;"></span>    
</td>    
</tr>    
<tr>    
<td class="left">&nbsp;</td>    
<td class="center">    
<input name="" type="image" src="img/register.jpg"/>    
</td>    
</tr>    
</table>    
</td>    
</tr>    
</table>    
</form>    
</body>    
</html>    

效果如下:

注册.PNG

发表评论