<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,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main{
width:670px;
margin:0 auto;
}
.bg{
background-image:url(images/register_bg.gif);
background-repeat:no-repeat;
width:6px;
height:6px;
}
.bg_top_left{
background-position:0px 0px;
}
.bg_top_right{
background-position:0px -6px;
}
.bg_end_left{
background-position:0px -12px;
}
.bg_end_right{
background-position:0px -18px;
}
.bg_top{
border-top:solid 1px #666666;
}
.bg_end{
border-bottom:solid 1px #666666;
}
.bg_left{
border-left:solid 1px #666666;
}
.bg_right{
border-right:solid 1px #666666;
}
.content{
padding:10px;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
.content div{
float:left;
font-size:12px;
color:#000;
}
dl{
clear:both;
}
dt,dd{
float:left;
}
dt{
width:130px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
width:180px;
}
/*当鼠标放到文本框时,提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时,提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时,提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
</style>
</head>
<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform">
<dl>
<dt>通行证用户名:</dt>
<dd><input type="text" id="userName" class="inputs userWidth" onFocus="userNameFocus()" onBlur="userNameBlur()"/> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登录密码:</dt>
<dd><input type="password" id="pwd" class="inputs" οnfοcus="pwdFocus()" onBlur="pwdBlur()"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重复登录密码:</dt>
<dd><input type="password" id="repwd" class="inputs" οnblur="repwdBlur()"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性别:</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>真实姓名:</dt>
<dd><input type="text" id="realName" class="inputs" /></dd>
</dl>
<dl>
<dt>昵称:</dt>
<dd><input type="text" id="nickName" class="inputs" οnfοcus="nickNameFocus()" onBlur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>你的手机号:</dt>
<dd><input type="text" id="tel" class="inputs" οnfοcus="telFocus()" onBlur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮箱:</dt>
<dd><input type="text" id="email" class="inputs" onFocus="emailFocus()" onBlur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="images/button.gif" onClick="check()"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
<script type="text/javascript">
/*
用户名验证
*/
function userNameFocus(){
var userNameId = document.getElementById("userNameId");
userNameId.className ="import_prompt";
userNameId.innerHTML ="1、通行证用户名由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开关或结尾,且长度为4-18";
}
function userNameBlur(){
var userNameId = document.getElementById("userNameId");
var userName=document.getElementById("userName").value;
if(userName==""){
userNameId.className = "error_prompt";
userNameId.innerHTML ="通行证用户名不能为空,请输入通行证用户名";
return false;
}
var reg = /^[a-zA-Z0-9]\w{2,16}[a-zA-Z0-9]$/;
if(!reg.test(userName)){
userNameId.className = "error_prompt";
userNameId.innerHTML ="1、通行证用户名由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开关或结尾,且长度为4-18";
return false;
}else{
userNameId.className ="ok_prompt";
userNameId.innerHTML = "输入正确";
return true;
}
}
/*
密码
*/
function pwdFocus(){
var pwdId = document.getElementById("pwdId");
pwdId.className ="import_prompt";
pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";
}
function pwdBlur(){
var pwdId = document.getElementById("pwdId");
var pwd=document.getElementById("pwd").value;
var reg = /^[a-zA-Z0-9]{6,16}$/;
if(pwd==""){
pwdId.className = "error_prompt";
pwdId.innerHTML ="密码不能为空,请输入密码";
return false;
}
if(!reg.test(pwd)){
pwdId.className = "error_prompt";
pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";
return false;
}else{
pwdId.className ="ok_prompt";
pwdId.innerHTML = "输入正确";
return true;
}
}
/*
重复密码
*/
function repwdBlur(){
var repwdId = document.getElementById("repwdId");
var repwd=document.getElementById("repwd").value;
var pwd=document.getElementById("pwd").value;
if(repwd==""){
repwdId.className = "error_prompt";
repwdId.innerHTML ="密码不能为空";
return false;
}
if(repwd!=pwd){
repwdId.className = "error_prompt";
repwdId.innerHTML ="两次输入的密码不一致,请重新输入";
return false;
}else{
repwdId.className ="ok_prompt";
repwdId.innerHTML = "输入正确";
return true;
}
}
/*
昵称验证
*/
function nickNameFocus(){
var nickNameId = document.getElementById("nickNameId");
nickNameId.className ="import_prompt";
nickNameId.innerHTML ="1、包含汉字、字母、数字、下划线以及!@#$%&*特殊符号<br/>2、长度为4-20个字符";
}
function nickNameBlur(){
var nickNameId = document.getElementById("nickNameId");
var nickName=document.getElementById("nickName").value;
var reg = /^([\u4e00-\u9fa5]|\w|[!@#$%&*]+){4,20}$/;
if(nickName==""){
nickNameId.className = "error_prompt";
nickNameId.innerHTML ="昵称不能为空,请输入昵称";
return false;
}
if(!reg.test(nickName)){
nickNameId.className = "error_prompt";
nickNameId.innerHTML ="1、长度为4-20个字符<br/>2、一个汉字占两个字符";
return false;
}else{
nickNameId.className ="ok_prompt";
nickNameId.innerHTML = "昵称输入正确";
return true;
}
}
/*
手机号验证
*/
function telFocus(){
var telId = document.getElementById("telId");
telId.className ="import_prompt";
telId.innerHTML ="手机号由11位数字组成,以13、15、18开头";
}
function telBlur(){
var telId = document.getElementById("telId");
var tel=document.getElementById("tel").value;
var reg = /^1(3|5|8)\d{9}$/;
if(tel==""){
telId.className = "error_prompt";
telId.innerHTML ="手机号码不能为空,请输入手机号码";
return false;
}
if(!reg.test(tel)){
telId.className = "error_prompt";
telId.innerHTML ="手机号由11位数字组成,以13、15、18开头";
return false;
}else{
telId.className ="ok_prompt";
telId.innerHTML = "输入正确";
return true;
}
}
/*
邮箱验证
*/
function emailFocus(){
var emailId = document.getElementById("emailId");
emailId.className ="import_prompt";
emailId.innerHTML ="请输入您常用的电子邮箱";
}
function emailBlur(){
var emailId = document.getElementById("emailId");
var email=document.getElementById("email").value;
var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email==""){
emailId.className = "error_prompt";
emailId.innerHTML ="电子邮箱不能为空,请输入电子邮箱";
return false;
}
if(!reg.test(email)){
emailId.className = "error_prompt";
emailId.innerHTML ="格式不正确,请重新输入";
return false;
}else{
emailId.className ="ok_prompt";
emailId.innerHTML = "输入正确";
return true;
}
}
function check(){
if(pwdBlur() && pwdBlur() && repwdBlur() && nickNameBlur() && telBlur() && emailBlur()){
alert("注册成功!");
return true;
}else{
alert("注册失败成功!");
return false;
}
}
</script>
</div>
</body>
</html>
效果图: