JS无刷新注册表单检测效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<title>仿支付宝注册表单效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<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(//ku.shouce.ren/files/images/201601/56a364329d2df.gif) no-repeat 5px 3px;
		padding: 3px 3px 3px 25px;
		border: 1px solid #00A8FF;
	}
	.wName{
		color: #000;
		background: #FFF2E9 url(//ku.shouce.ren/files/images/201601/56a36433880ef.gif) no-repeat 5px 3px;
		padding: 3px 3px 3px 25px;
		border: 1px solid #FF6600;
	}
	.rName {
		color: #000;
		background: transparent url(//ku.shouce.ren/files/images/201601/56a3643471cbe.gif) no-repeat 0px 0px;
		padding: 3px 3px 3px 25px;
	}
	.txtR{
		background: #FFFFFF url(//ku.shouce.ren/files/images/201601/56a364352e1e0.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(//ku.shouce.ren/files/images/201601/56a36435d9d3f.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(//ku.shouce.ren/files/images/201601/56a36436bec0e.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 onload="inputLoadOk()">
<form>
<h2 class="reg">加入：</h2>
<div>
	<label for="name">用户名</label>
	<input type="text" id="name" value="" maxlength="16" onblur="checkName()"/><span id="nameMsg"></span>
</div>
<div>
	<label for="pwd">密码</label>
	<input type="password" id="pwd" value="" maxlength="16" onblur="checkPwd()"/><span id="pwdMsg"></span>
</div>
<div>
	<label for="pwd2">确认密码</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>我已阅读了协议<span>
	<span id="txtinfo" class="txtarea" style="padding-top:5px">这里是用户注册协议的内容，请自行添加！</span>
	
</div>
<div>
	<label> </label>
	<input type="button" class="subBtn" id="btnSub" disabled  value="开始检测并登记" onclick="checkForm()">
</div>
</form>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS无刷新注册表单检测效果

分类

表单按钮

描述

一款仿淘宝支付宝网站的用户注册表单效果，无刷新检测用户名、密码，还有一个钩选用户注册协议的选项，用户必须点击用户注册协议的复选框之后才能点击提交，用到了几个GIF小图，请自行下载。