<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用正则表达式验证注册页面</title>
<style type="text/css">
body{
margin:0;
padding:0;
font-size:12px;
line-height:20px;
}
.main{
width:525px;
margin-left:auto;
margin-right:auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align:bottom;
padding-left:12px;
}
.left{
text-align:right;
width:80px;
height:25px;
padding-right:5px;
}
.center{
width:135px;
}
.in{
width:130px;
height:16px;
border:solid 1px #79abea;
}
.red{
color:#cc0000;
font-weight:bold;
}
div{
color:#F00;
}
</style>
</head>
<body>
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<form action="" method="post" name="myform" οnclick="return postBool();">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名：</td>
<td class="center"><input id="user" type="text" class="in" οnblur="userBtn();" /></td>
<td><div id="userText">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></td>
</tr>
<tr>
<td class="left">密码：</td>
<td class="center"><input id="pwd" type="password" class="in" οnblur="pwdBtn();" /></td>
<td><div id="pwdText"></div></td>
</tr>
<tr>
<td class="left">确认密码：</td>
<td class="center"><input id="repwd" type="password" class="in" /></td>
<td><div id="repwdText">密码由英文字母和数字组成的4-10位字符</div></td>
</tr>
<tr>
<td class="left">电子邮箱：</td>
<td class="center"><input id="email" type="text" class="in" οnblur="emailBtn();" /></td>
<td><div id="emailText"></div></td>
</tr>
<tr>
<td class="left">手机号码：</td>
<td class="center"><input id="mobile" type="text" class="in" οnblur="mobileBtn();" /></td>
<td><div id="mobileText">以13或15开头</div></td>
</tr>
<tr>
<td class="left">生日：</td>
<td class="center"><input id="birth" type="text" class="in" οnblur="birthBtn();" /></td>
<td><div id="birthText"></div></td>
</tr>
<tr>
<td class="left"> </td>
<td class="center"><input name="" type="image" src="images/register.jpg" /></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</form>
</table>
<script type="text/javascript">
/*
用户名验证
*/
function userBtn(){
var user=document.getElementById("user").value;
var userReg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
//alert(userReg.test(user));
var userText=document.getElementById("userText");
if(userReg.test(user)){
userText.innerHTML="输入正确!";
return true;
}else{
userText.innerHTML="输入不正确!";
}
return false;
}
/*
密码验证
*/
function pwdBtn(){
var pwd=document.getElementById("pwd").value;
var pwdReg=/^[a-zA-Z0-9]{4,10}$/;
//alert(pwdReg.test(pwd));
var pwdText=document.getElementById("pwdText");
if(pwdReg.test(pwd)){
pwdText.innerHTML="输入正确!";
var repwd=document.getElementById("repwd").value;
var repwdText=document.getElementById("repwdText");
if(pwd==repwd){
repwdText.innerHTML="输入正确!";
return true;
}else{
repwdText.innerHTML="第二次输入的密码与第一次不相同";
}
}else{
pwdText.innerHTML="输入不正确!";
}
return false;
}
/*
电子邮件验证
*/
function emailBtn(){
var email=document.getElementById("email").value;
var emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
//alert(emailReg.test(email));
var emailText=document.getElementById("emailText");
if(emailReg.test(email)){
emailText.innerHTML="输入正确!";
return true;
}else{
emailText.innerHTML="输入不正确!";
}
return false;
}
/*
手机号码验证
*/
function mobileBtn(){
var mobile=document.getElementById("mobile").value;
var mobileReg=/^1[3|5]\d{9}$/;
//alert(mobileReg.test(mobile));
var mobileText=document.getElementById("mobileText");
if(mobileReg.test(mobile)){
mobileText.innerHTML="输入正确!";
return true;
}else{
mobileText.innerHTML="输入不正确!以13或15开头";
}
return false;
}
/*
出生日期验证
*/
function birthBtn(){
var birth=document.getElementById("birth").value;
var birthReg=/((19\d{2})|(200\d))-(0\d|1[0-2])-([0-2]\d|3[0-1])/;
//alert(birthReg.test(birth));
var birthText=document.getElementById("birthText");
if(birthReg.test(birth)){
birthText.innerHTML="输入正确!";
return true;
}else{
birthText.innerHTML="输入不正确!";
}
return false;
}
/*
提交验证
*/
function postBool(){
if(userBtn()&&pwdBtn()&&emailBtn()&&mobileBtn()&&birthBtn()){
alert("提交成功!");
}
}
</script>
</body>
</html>
效果图：
