仿支付宝注册表单效果

<!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>  <br /><br /> <title>仿支付宝注册表单效果 _ 诺豆网 yangjunwei.com</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间-->
<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(http://wyangjunwei.com/blog/Img_Temp/alipay_ok.gif) no-repeat 5px 3px; padding: 3px 3px 3px 25px; border: 1px solid #00A8FF; }
	.wName{ color: #000; background: #FFF2E9 url(http://wyangjunwei.com/blog/Img_Temp/alipay_no.gif) no-repeat 5px 3px; padding: 3px 3px 3px 25px; border: 1px solid #FF6600; }
	.rName { color: #000; /*background: #e2f5ff url(http://wyangjunwei.com/blog/Img_Temp/alipay_yes.gif) no-repeat 5px 3px;*/ background: transparent url(http://wyangjunwei.com/blog/Img_Temp/alipay_yes.gif) no-repeat 0px 0px; padding: 3px 3px 3px 25px; /*border: 1px solid #00A8FF;*/}
	.txtR{ background: #FFFFFF url(http://wyangjunwei.com/blog/Img_Temp/alipay_input_ok_corner.gif) 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(http://wyangjunwei.com/blog/Img_Temp/alipay_input_warning_corner.gif) 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(http://wyangjunwei.com/blog/Img_Temp/alipay_input_error_corner.gif) 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)}
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>改为-->
<body onload="inputLoadOk()">
<!--把下面代码加到<body>与</body>之间-->
<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" value="" 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>
				<span id="txtinfo"  class="txtarea"  style="padding-top:5px">
					用户注册协议
			</span>
			<!--<label> </label>  <br /><br
			/> <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>