欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

速成新用户登记页面

更新时间: 2014-05-16 09:42:06 责任编辑: Author_N5

 

速成新用户注册页面
<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"  onfocus="pwdFocus()" onBlur="pwdBlur()"/></dd>
          <div id="pwdId"></div>
        </dl>
         <dl>
          <dt>重复登录密码:</dt>
          <dd><input type="password" id="repwd" class="inputs"  onblur="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"  onfocus="nickNameFocus()" onBlur="nickNameBlur()"/></dd>
          <div id="nickNameId"></div>
        </dl>
        <dl>
          <dt>你的手机号:</dt>
          <dd><input type="text" id="tel" class="inputs"  onfocus="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>

 

效果图:



 

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-05-16 09:42:06
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/601172/
本文WWW.DOC100.NET DOC100.NET版权所有。