<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" /> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登录密码：</dt>
<dd><input type="password" id="pwd" class="inputs" οnfοcus="pwdFocus()" οnblur="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()" οnblur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>关联手机号：</dt>
<dd><input type="text" id="tel" class="inputs" οnfοcus="telFocus()" οnblur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮箱：</dt>
<dd><input type="text" id="email" class="inputs" οnfοcus="emailFocus()" οnblur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="images/button.gif"/></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">
// JavaScript Document
//根据ID获取元素
function $(id){
return document.getElementById(id);
}
window.onload = function(){
//用户名获取焦点事件
$("userName").onfocus = function(){
userNameFocus();
}
//用户名焦点事件
$("userName").onblur = function(){
userNameBlur(this);
}
//登录密码获取焦点事件
$("pwd").onfocus = function(){
pwdFocus();
}
//登录密码失去焦点事件
$("pwd").onblur = function(){
pwdBlur(this);
}
//重复密码失去焦点事件
$("repwd").onblur = function(){
repwdBlur(this);
}
//昵称获取焦点事件
$("nickName").onfocus = function(){
nickNameFocus();
}
//昵称失去焦点事件
$("nickName").onblur = function(){
nickNameBlur(this);
}
//手机号获取焦点事件
$("tel").onfocus = function(){
telFocus();
}
//手机号失去焦点事件
$("tel").onblur = function(){
telBlur(this);
}
//邮箱获取焦点事件
$("email").onfocus = function(){
emailFocus();
}
//邮箱失去焦点事件
$("email").onblur = function(){
emailBlur(this);
}
//给表单注册提交事件
document.myform.onsubmit = function(){
return checkForm();
}
}
//用户名获取焦点验证
function userNameFocus(){
var userNameId = $("userNameId");
userNameId.className ="import_prompt";
userNameId.innerHTML ="1、通行证用户名由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开关或结尾，且长度为4－18";
}
//用户名失去焦点验证
function userNameBlur(obj){
var userNameId = $("userNameId");
if("" == obj.value){
userNameId.className = "error_prompt";
userNameId.innerHTML ="通行证用户名不能为空，请输入通行证用户名";
return false;
}
var regUser = /^[a-zA-Z0-9][a-zA-Z0-9._-]{2,16}[a-zA-Z0-9]$/;
if(regUser.test(obj.value)==false){
userNameId.className = "error_prompt";
userNameId.innerHTML ="1、通行证用户名由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开关或结尾，且长度为4-18";
return false;
}
userNameId.className ="ok_prompt";
userNameId.innerHTML = "通行证用户名输入正确";
return true;
}
//登录密码获取焦点验证
function pwdFocus(){
var pwdId = $("pwdId");
pwdId.className ="import_prompt";
pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";
}
//登录密码失去焦点验证
function pwdBlur(obj){
var pwdId = $("pwdId");
if("" == obj.value){
pwdId.className = "error_prompt";
pwdId.innerHTML ="密码不能为空，请输入密码";
return false;
}
var regPwd = /^[a-zA-Z0-9]{6,16}$/;
if(regPwd.test(obj.value)==false){
pwdId.className = "error_prompt";
pwdId.innerHTML ="密码由英文字母和数字组成的6-16位字符";
return false;
}
pwdId.className ="ok_prompt";
pwdId.innerHTML = "密码输入正确";
return true;
}
//重复密码失去焦点验证
function repwdBlur(obj){
var repwdId = $("repwdId");
if("" == obj.value){
repwdId.className = "error_prompt";
repwdId.innerHTML ="重复密码不能为空，请输入重复密码";
return false;
}
if(obj.value != $("pwd").value){
repwdId.className = "error_prompt";
repwdId.innerHTML ="两次输入的密码不一致，请重新输入";
return false;
}
repwdId.className ="ok_prompt";
repwdId.innerHTML = "两次密码输入正确";
return true;
}
//昵称获取焦点验证
function nickNameFocus(){
var nickNameId = $("nickNameId");
nickNameId.className ="import_prompt";
nickNameId.innerHTML ="1、包含汉字、字母、数字、下划线以及!@#$%&*特殊符号<br/>2、长度为4-20个字符<br/>3、一个汉字占两个字符";
}
//昵称失去焦点验证
function nickNameBlur(obj){
var nickNameId = $("nickNameId");
if("" == obj.value){
nickNameId.className = "error_prompt";
nickNameId.innerHTML ="昵称不能为空，请输入昵称";
return false;
}
var regNickName = /^([\u4e00-\u9fa5]|\w|[!@#$%&*]+)$/;
if(regNickName.test(obj.value)==false){
nickNameId.className = "error_prompt";
nickNameId.innerHTML ="只能由汉字、字母、数字、下划线以及!@#$%&*特殊字符组成";
return false;
}
//把中文字符转换为两个字母，以计算字符长度
var len = obj.value.replace(/[\u4e00-\u9fa5]/g,"ab").length;
if(len<4 || len>20){
nickNameId.className = "error_prompt";
nickNameId.innerHTML ="1、长度为4-20个字符<br/>2、一个汉字占两个字符";
return false;
}
nickNameId.className ="ok_prompt";
$("userNameId").innerHTML = "昵称输入正确";
return true;
}
//手机号获取焦点验证
function telFocus(){
var telId = $("telId");
telId.className ="import_prompt";
telId.innerHTML ="手机号由11位数字组成，以13、15、18开头";
}
//手机号失去焦点验证
function telBlur(obj){
var telId = $("telId");
if("" == obj.value){
telId.className = "error_prompt";
telId.innerHTML ="手机号码不能为空，请输入手机号码";
return false;
}
var regTel = /^1(3|5|8)\d{9}$/;
if(regTel.test(obj.value)==false){
telId.className = "error_prompt";
telId.innerHTML ="手机号由11位数字组成，以13、15、18开头";
return false;
}
telId.className ="ok_prompt";
telId.innerHTML = "手机号码输入正确";
return true;
}
//邮箱获取焦点验证
function emailFocus(){
var emailId = $("emailId");
emailId.className ="import_prompt";
emailId.innerHTML ="请输入您常用的电子邮箱";
}
//邮箱失去焦点验证
function emailBlur(obj){
var emailId = $("emailId");
if("" == obj.value){
emailId.className = "error_prompt";
emailId.innerHTML ="电子邮箱不能为空，请输入电子邮箱";
return false;
}
var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(regEmail.test(obj.value)==false){
emailId.className = "error_prompt";
emailId.innerHTML ="电子邮箱格式不正确，请重新输入";
return false;
}
emailId.className ="ok_prompt";
emailId.innerHTML = "保密邮箱输入正确";
return true;
}
//表单提交验证
function checkForm(){
var userName = userNameBlur($("userName"));
var pwd = pwdBlur($("pwd"));
var repwd = repwdBlur($("repwd"));
var nickName = nickNameBlur($("nickName"));
var tel = telBlur($("tel"));
var email = emailBlur($("email"));
if(userName && pwd && repwd && nickName && tel && email){
return true;
}else{
return false;
}
}
</script>
</div>
</body>
</html>
效果图：
个人E-mail：chaoyi77@163.com
7054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
