<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>通用注册页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script language="javascript" src="datePop.js" ></script>
<style type="text/css" media="all">
body {
background: #000;
}
h1 {
width: 100%;
text-align: center;
color: #397df3;
text-shadow: #F99 3px 3px 3px;
width: 100%;
}
h1 span {
color: gray;
font-size: 40px
}
#div_Body {
padding: 4px;
width: 50%;
float:left;
margin-left: 25%;
margin-right: 25%;
background: url("wood.png")
}
#div_bottom {
padding: 10px;
width: 100%;
text-align:center;
letter-spacing:2px;
font-size:16px;
color:#000;
margin-top:100px;
margin-left:120px;
text-shadow: #CCC 2px 2px 3px;
}
#div_textSecond {
list-style-type:none;
margin-left: 10px;
font: 20px bold;
color: #000;
text-shadow: #999 2px 2px 2px;
text-align: justify;
line-height: 40px;
text-shadow: #999 2px 2px 2px;
padding: 5px;
display: none;
}
#div_textSecond lable{margin-right:16px; font-size:16;}
#div_textSubmit {
padding: 5px;
margin-left:60px;
}
ul {
list-style-type:none;
margin-left: 10px;
margin-top:35px;
font: 20px bold;
color: #000;
text-shadow: #999 2px 2px 2px;
text-align: justify;
line-height: 45px;
text-shadow: #999 2px 2px 2px;
}
input {
height: 30px;
background: #CCC;
border: 2px solid #cf7f20;
padding: 5px;
}
.msgPrompt {
font-family: 宋体;
font-size: 12px;
margin-left: 20px;
padding: 2px;
position: absolute;
color: #FFF;
text-shadow: none;
visibility: hidden;
}
.msgError{
font-family: 宋体;
font-size: 14px;
margin-left: 20px;
padding: 2px;
text-shadow: none;
position: absolute;
color: #e31032;
visibility: hidden;}
.msgOk{
font-family: 黑体;
font-size: 20px;
margin-left: 20px;
padding: 2px;
position: absolute;
color: green;
text-shadow: #999 2px 2px 2px;
visibility: hidden;}
#submit{
position:absolute;
background:url(submit.gif);
color:blue;
text-shadow: black 1px 1px 2px;
letter-spacing:2px;
margin-left:180px;
border:none;
}
#div_textSubmit > textarea{
background:#BBB;
width:500px;
margin-top:40px;
border:2px inset yellow;
color:gray;
font-size:12px;
line-height:20px;
}
</style>
<script type="text/javascript">
//聚焦第一个字段 ,页面载入时
function fnFocusFirst(){
var oFirst=document.forms[0].elements[0];
oFirst.focus();
}
//单用户输入的值达到指定值的最大时，自动切下一个字段
var FormUtil=new Object;
FormUtil.fnTab= function(oTextBox){
var oForm=oTextBox.form;
var oLastTextBox=oForm.elements[oForm.elements.length-1];
if((oLastTextBox!=oTextBox)&& oTextBox.value.length==oTextBox.getAttribute("maxlength")){
for(var i=0;i<oForm.elements.length;i++){
if(oForm.elements[i]==oTextBox){
for(var j=i+1;i<oForm.elements.length;j++){
if(oForm.elements[j].type!="hidden"){
oForm.elements[j].focus();
return;
}
}
return;
}
}
}
}
//当点击完善资料的适合 展现更多用户需要的信息
function toAppend(sDiv){
var oDiv=document.getElementById(sDiv);
oDiv.style.display=(oDiv.style.display=="none") ? "block" :"none";
}
//文本聚焦时:1.改变边框样式 2.选中文本中的字符 3.显示提示输入的格式
function handleFocus(sId){
var oFoc=document.getElementById(sId);
oFoc.style.border="3px solid yellow";
oFoc.style.background="#FFF";
oFoc.select();
if(sId=="nameId"){
var oPrompt=document.getElementById("nameMsgPrompt");
oPrompt.style.visibility="visible";
var oError=document.getElementById("nameMsgError");
oError.style.visibility="hidden";
var oOk=document.getElementById("nameMsgOk");
oOk.style.visibility="hidden";
}
if(sId=="pwd1"){
var oPrompt=document.getElementById("pwd1MsgPrompt");
oPrompt.style.visibility="visible";
var oError=document.getElementById("pwd1MsgError");
oError.style.visibility="hidden";
var oOk=document.getElementById("pwd1MsgOk");
oOk.style.visibility="hidden";
}
if(sId=="pwd2"){
var oPrompt=document.getElementById("pwd2MsgPrompt");
oPrompt.style.visibility="visible";
var oError=document.getElementById("pwd2MsgError");
oError.style.visibility="hidden";
var oOk=document.getElementById("pwd2MsgOk");
oOk.style.visibility="hidden";
}
if(sId=="emailId"){
var oPrompt=document.getElementById("emailMsgPrompt");
oPrompt.style.visibility="visible";
var oError=document.getElementById("emailMsgError");
oError.style.visibility="hidden";
var oOk=document.getElementById("emailMsgOk");
oOk.style.visibility="hidden";
}
}
//文本失焦时
function handleBlur(sId){
var oFoc=document.getElementById(sId);
oFoc.style.border="2px solid #cf7f20";
oFoc.style.background="#CCC";
if(sId=="nameId"){
//进行用户名验证
if(isValidUsername(oFoc.value)){
var oPrompt=document.getElementById("nameMsgPrompt");
oPrompt.style.visibility="hidden";
var oError=document.getElementById("nameMsgError");
oError.style.visibility="hidden";
var oPrompt=document.getElementById("nameMsgOk");
oPrompt.style.visibility="visible";
}else{
oFoc.style.border="2px dashed red";
var oPrompt=document.getElementById("nameMsgPrompt");
oPrompt.style.visibility="hidden";
var oError=document.getElementById("nameMsgError");
oError.
经典注册页面 &&表单的验证
5星 · 超过95%的资源 需积分: 9 75 浏览量
2011-04-21
16:57:35
上传
评论 1
收藏 863KB RAR 举报 
经典登陆页面.rar （5个子文件） 
经典登陆页面 
Register.html 18KB
submit.gif 2KB 24.gif 843B
datePop.js 9KB
wood.png 869KB资源评论
jianyan3378452012-04-13很全，很给力，有三种验证方式
Yimi喵2013-09-26很给力，有三种验证方式
咬着布丁的龙猫2013-12-10对，的确是很经典的注册页面，不过后来我发现官网有jquery表单的验证插件，好强大，我用其他的吧
