仿支付宝注册页面效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Check Form</title>
<style type="text/css">
body {
font-family: "Arial", "Helvetica", "sans-serif" ;
font-size: 11.5px;
}
div {
display: block;
padding: 5px 0;
text-align:left;
margin:5px 10px;
width:700px;
}
input {
padding:2px 8px 0px 3px;
border-top-width:1px;
border-left-width:1px;
border-right-width:1px solid #ccc;
border-bottom-width:1px solid #ccc;
margin-right:5px;
}
.txtarea{
font-size:11.5px;
width:500px;
height:300px;
display:none;
margin-left:160px;
border-top-width:1px;
border-left-width:1px;
border-right-width:1px solid #ccc;
border-bottom-width:1px solid #ccc;
overflow:auto;
}
label {
float:left;
text-align:right;display:block;
width:150px; padding:2px 8px 0px 3px;
}
.reg{
font-size:11.5px;
font-weight:bold;
border-bottom: 1px solid #CCCCEE;
padding-bottom:5px;
width:700px;
margin:10px;
}
.divstyle
{
border:1px solid #CCCCEE;
background-color:#EEEEFF;
display: block;
padding: 5px 0;
text-align:left;
margin:5px 10px;
width:700px;
}
.subBtn{
border:1px solid #ccc;
color:#333;
background-color:#EEEEFF;
text-align:center;
}
.eName{
color:#000;
background:#e2f5ff url(<img src="http://www.bluekevin.com/images/ok.gif" border="0" alt=""/>) no-repeat 5px 3px;
padding:3px 3px 3px 25px;
border:1px solid #00A8FF;
}
.wName{
color:#000;
background:#FFF2E9 url(<img src="http://www.bluekevin.com/images/no.gif" border="0" alt=""/>) no-repeat 5px 3px;
padding:3px 3px 3px 25px;
border:1px solid #FF6600;
}
.rName {
color:#000;
/*background:#e2f5ff url(<img src="http://www.bluekevin.com/images/yes.gif" border="0" alt=""/>) no-repeat 5px 3px;*/
background:transparent url(images/yes.gif) no-repeat 0px 0px;
padding:3px 3px 3px 25px;
/*border:1px solid #00A8FF;*/
}
.txtR{
background:#FFFFFF url(<img src="http://www.bluekevin.com/images/input_ok_corner.gif" border="0" alt=""/>) no-repeat scroll right top;
border-top-width:1px;
border-left-width:1px;
border-right-width:1px solid #ccc;
border-bottom-width:1px solid #ccc;
padding:2px 3px 0px 3px;
}
.txtW{
background:#FFFFFF url(<img src="http://www.bluekevin.com/images/input_warning_corner.gif" border="0" alt=""/>) no-repeat scroll right bottom;
border-top-width:1px;
border-left-width:1px;
border-right-width:1px solid #ccc;
border-bottom-width:1px solid #ccc;
padding:2px 3px 0px 3px;
}
.txtE{
background:#FFFFFF url(<img src="http://www.bluekevin.com/images/input_error_corner.gif" border="0" alt=""/>) no-repeat scroll right bottom;
border-top-width:1px;
border-left-width:1px;
border-right-width:1px solid #ccc;
border-bottom-width:1px solid #ccc;
padding:2px 3px 0px 3px;
}
</style>
<script type="text/javascript" language="javascript" >
function $(id){return document.getElementById(id);}
function $F(id){return document.getElementById(id).value;}
function $N(name){return document.getElementsByTagName(name)}
/*
author:kevin
email:kevin_218@163.com
msn:xiao-<a href="mailto:kevin@hotmail.com%22%3Ekevin@hotmail.com%3C/a>
*/
function isName(s)
{
var patrn=/^(\w){6,16}$/;
if (!patrn.exec(s)) {return false;}
return true;
}
function checkName()
{
if($F('name')=="")
{
with($('nameMsg'))
{
innerHTML="Please enter this";
className="eName";
}
$('name').className='txtW';
$('name').parentNode.className="divstyle";
}
else if($F('name')!=="" &&!isName($F('name')))
{
with($('nameMsg'))
{
innerHTML="Enter between 6 and 16 characters (A-Z, a-z, 0-9,_ ,).";
className="wName";
}
//$('name').focus();
$('name').className='txtE';
$('name').parentNode.className="divstyle";
return false;
}
else
{
with($('nameMsg'))
{
innerHTML=" ";
className="rName";
}
$('name').className='txtR';
$('name').parentNode.className="";
return true;
}
}
function checkPwd()
{
if($F('pwd')=="")
{
with($('pwdMsg'))
{
innerHTML="Please enter this";
className="eName";
}
$('pwd').className='txtW';
$('pwd').parentNode.className="divstyle";
}
else if($F('pwd')!=="" &&!isName($F('pwd')))
{
with($('pwdMsg'))
{
innerHTML="Enter between 6 and 16 characters (A-Z, a-z, 0-9,_ ,).";
className="wName";
}
//$('pwd').focus();
$('pwd').className='txtE';
$('pwd').parentNode.className="divstyle";
return false;
}
else
{
with($('pwdMsg'))
{
innerHTML=" ";
className="rName";
}
$('pwd').className='txtR';
$('pwd').parentNode.className="";
return true;
}
}
function checkPwd2()
{
if($F('pwd2')=="")
{
with($('pwdMsg2'))
{
innerHTML="Please enter this";
className="eName";
}
$('pwd2').className='txtW';
$('pwd2').parentNode.className="divstyle";
}
else if($F('pwd2')!=="" &&!isName($F('pwd2')))
{
with($('pwdMsg2'))
{
innerHTML="Enter between 6 and 16 characters (A-Z, a-z, 0-9,_ ,).";
className="wName";
}
//$('pwd2').focus();
$('pwd2').className='txtE';
$('pwd2').parentNode.className="divstyle";
return false;
} else if($F('pwd2')==$F('pwd'))
{
with($('pwdMsg2'))
{
innerHTML=" ";
className="rName";
}
$('pwd2').className='txtR';
$('pwd2').parentNode.className="";
return true;
}
else
{
with($('pwdMsg2'))
{
innerHTML="Please confirm the pasword";
className="eName";
}
//$('pwd2').focus();
$('pwd2').className='txtE';
$('pwd2').parentNode.className="divstyle";
return false;
}
}
function inputLoadOk()
{
var elm = $N('input');
for( i=0; i<elm.length;i++)
{
if(elm[i].type != "button" && elm[i].type != "submit" && elm[i].type != "reset"&&elm[i].type!="checkbox")
{
elm[i].className="txtW";
//elm[i].nextSibling.innerHTML="txtW";
//alert(elm[i].nextSibling.innerHTML)
}
}
}
function infoClick()
{
if($('info').checked)
{
$('btnSub').disabled = false;
$('txtinfo').style.display='block';
//$('info').className='txtE';
$('info').parentNode.className="divstyle";
return true;
}
else
$('btnSub').disabled = true;
$('txtinfo').style.display='none'
$('info').parentNode.className="";
return false;
}
function checkForm()
{
if(checkName()&&checkPwd()&&checkPwd2()&&infoClick())
{
alert("go to method");
}
}
</script>
</head>
<body onload="inputLoadOk()">
<form>
<h2 class="reg">Sign Up</h2>
<div>
<label for="name">UserName</label>
<input type="text" id="name" value="" maxlength="16" onblur="checkName()"/><span id="nameMsg" ></span>
</div>
<div>
<label for="pwd">Password</label>
<input type="password" id="pwd" valye="" maxlength="16" onblur="checkPwd()"/><span id="pwdMsg"></span>
</div>
<div>
<label for="pwd2">Confirm Password</label>
<input type="password" id="pwd2" value="" maxlength="16" onblur="checkPwd2()"/><span id="pwdMsg2"></span>
</div>
<div>
<label> </label>
<input type="checkbox" id="info" name="info" value="" onclick="infoClick()"/><span> Agree to the following terms and confirm registration<span>
<!--<label> </label>-->
<textarea id="txtinfo" class="txtarea">用户注册协议
[.用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议
\用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议用户注册协议
</textarea>
</div>
<div>
<label> </label>
<input type="button" class="subBtn" id="btnSub" disabled value="Check Form" onclick="checkForm()">
</div>
</form>
</body>
</html>
