速成新用户注册页面

chaoyi

浏览: 291080 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

JS 粗浅

<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>

效果图：

查看图片附件

0
顶

0
踩

分享到：

速成淘宝购物车页面 | ORACLE使用全套脚本

2013-12-09 22:46
浏览 1069
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

速成新用户注册页面

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

速成新用户注册页面

评论

发表评论

相关推荐

速成淘宝购物车页面

贵美商城首页特效

淘宝购物车页面

全选与否和删除多行

新用户注册页面

简单的添加下拉菜单

使用正则表达式验证注册页面

注册贵美商城

带关闭按钮的滚动广告

使用style改变样式

改变文字的背景

操作表格

修改订单

锚点链接

多幅图片切换的特效

全选/全不选效果

图片的切换效果

制作树形菜单

location与history

非常简单的运算器

最近访客更多访客>>