js 注册页面案例

悠悠 2021-07-24 15:26 487阅读 0赞

校验  
正则  
封装  
span

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style type="text/css">
    			#showdiv{ 
    				border:solid 2px orange;
    				width:450px;
    				border-radius:10px;
    				margin:auto;
    				margin-top:40px;
    			}
    			tr{ 
    				height:40px;
    			}
    			table{ 
    				margin:auto;
    				color:white;
    			}
    			body{ 
    				background-image:url(../css学习/img/钢铁侠4.jpg);
    				background-repeat:no-repeat;
    				background-size:1550px 730px;
    			}
    			input,textarea{ 
    				color:blueviolet;
    			}
    			span{ 
    				font-size:13px;
    			}
    			#codeSpan{ 
    				font-size:20px;
    			}
    			
    		</style>
    		<script  type="text/javascript">
    			//创建验证码
    			function createCode()
    			{ 
    				var code=Math.floor(Math.random()*9000+1000);
    				var span=document.getElementById("codeSpan");
    				span.innerHTML=code;
    				
    			}
    			//验证用户名
    			function checkUname()
    			{ 
    				//获取用户名
    				var uname=document.getElementById("uname").value;
    				//创建校验规则
    				var reg=/^[\u4e00-\u9fa5]{2,4}$/;
    				//获取span对象
    				var span=document.getElementById("unameSpan");
    				//开始校验
    				if(uname==""||uname==null)
    				{ 
    				//输出校验结果
    					span.innerHTML="用户名不为空";
    					span.style.color="red";
    					return false;
    				}else if(reg.test(uname)){ 
    				//输出校验结果
    					span.innerHTML="✔";
    					span.style.color="green";
    					return true;
    				}else{ 
    					span.innerHTML="用户名不符合规则";
    					span.style.color="red";
    					return false;
    				}
    			}
    			//验证密码
    			function checkPwd(){ 
    				//获取用户的密码信息
    				var pwd=document.getElementById("pwd").value;
    				//创建校验规则
    				var reg=/^[a-z0-9]+$/i;
    				//获取span对象
    				var span=document.getElementById("pwdSpan");
    				//开始校验
    				if(pwd==""||pwd==null)
    				{ //输出校验结果
    					span.innerHTML="密码不能为空"
    					span.style.color="red";
    					return false;
    				}else if(reg.test(pwd))
    				{ 
    					span.innerHTML="✔";
    					span.style.color="green";
    					return true;
    				}else{ 
    					span.innerHTML="密码不符合规则";
    					span.style.color="red";
    					return false;
    				}
    				checkPwd2();  //重输入密码时调用确认密码校验,
    				
    			}
    			//验证确认密码
    			function checkPwd2()
    			{ 
    				var pwd=document.getElementById("pwd").value;
    				var pwd2=document.getElementById("pwd2").value;
    				var span=document.getElementById("pwd2Span");
    				if(pwd2==""||pwd==null)
    				{ 
    					span.innerHTML="确认密码不能为空";
    					span.style.color="red";
    					return false;
    				}
    				else if(pwd==pwd2)
    				{ 
    					span.innerHTML="✔";
    					span.style.color="green";
    					return true;
    				}else{ 
    					span.innerHTML="两次密码不相同";
    					span.style.color="red";
    					return false;
    				}
    			}
    			//验证手机号
    			function checkPhone(){ 
    				return checkField("phone",/^\d{5,}$/);
    				
    			}
    			//验证邮箱
    			function checkEmail(){ 
    				return checkField("mail",/^\d+@qq.com/);
    			}
    			//验证籍贯
    			function checkAddress(){ 
    				var address=document.getElementById("address").value;
    				var span=document.getElementById("addressSpan");
    				if(address=="a")
    				{ 
    					span.innerHTML="未选择籍贯";
    					span.style.color="red";
    					return false;
    				}else{ 
    					span.innerHTML="";
    					return true;
    				}
    			}
    			//验证爱好
    			function checkFav()
    			{ 
    				var favs=document.getElementsByName("fav");
    				var span=document.getElementById("favSpan");
    				
    				for(var i=0;i<favs.length;i++)
    				{ 
    					if(favs[i].checked)
    					{ 
    						span.innerHTML="";
    						return true;
    					}
    				}
    				
    				span.innerHTML="爱好至少选择一项";
    				span.style.color="red";
    				return false;
    			}
    			//验证验证码
    			function checkCode()
    			{ 
    				var code=document.getElementById("code").value;
    				var span=document.getElementById("codeSpan");
    				var span2=document.getElementById("codeSpan2");
    				
    				if(code==""||code==null)
    				{ 
    					span2.innerHTML="验证码为空";
    					span2.style.color="red";
    					return false;
    				}else if(span.innerHTML==code)
    				{ 
    					span2.innerHTML="✔";
    					span2.style.color="green";
    					return true;
    				}else{ 
    					span2.innerHTML="验证码错误";
    					span2.style.color="red";
    					return false;
    				}
    			}
    			//校验是否同意协议
    			 	function checkAgree(){ 
    					document.getElementById("sub").disabled=!document.getElementById("agree").checked;
    			 	}
    			//提交判断
    				function checkSub(){ 
    					checkUname();
    					checkPwd();
    					checkPwd2();
    					checkPhone();
    					checkEmail();
    					checkFav();
    					checkAddress();
    					checkCode();
    					return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkEmail()&&checkFav()&&checkAddress()&&checkCode();
    				}
    
    			 	
    			/*----封装----*/
    			function checkField(id,reg){ 
    				//获取用户数据
    				var inp=document.getElementById(id);
    				va=inp.value;
    				alt=inp.alt;
    				//创建检验规则
    				
    				//获取span对象
    				var span=document.getElementById(id+"Span");
    				//开始校验
    				if(va==""||va==null)
    				{ //输出校验结果
    					span.innerHTML=alt+"不能为空"
    					span.style.color="red";
    					return false;
    				}else if(reg.test(va)){ 
    					span.innerHTML="✔";
    					span.style.color="green";
    					return true;
    				}else{ 
    					span.innerHTML=alt+"不符合规则";
    					span.style.color="red";
    					return false;
    				}
    				
    				
    			}
    			
    		</script>
    	</head>
    	<body onload="createCode()">
    		<div id="showdiv">
    			
    		<form action="#" method="get" onsubmit="return checkSub()">
    			<table>
    				<tr>
    					<td width="80px">用户名:</td>
    					<td width="230px"><input type="text" name="uname" id="uname" alt="用户名" onblur="checkUname()"/><span id="unameSpan">*2-4位汉字</span>
    					</td>
    				</tr>
    				<tr>
    					<td>密码:</td>
    					<td><input type="password" name="pwd" id="pwd" onblur="checkPwd()"/>
    						<span id="pwdSpan">*数字和字母的组合</span>
    					</td>
    					
    				</tr>
    				<tr>
    					<td>确认密码:</td>
    					<td><input type="password" name="pwd2" id="pwd2" onblur="checkPwd2()"/>
    						<span id="pwd2Span"></span>
    					</td>
    					
    				</tr>
    				<tr>
    					<td>手机号:</td>
    					<td><input type="text" name="phone" id="phone" alt="手机号" onblur="checkPhone()"/>
    						<span id="phoneSpan"></span>
    					</td>
    					
    				</tr>
    				<tr>
    					<td>邮箱:</td>
    					<td><input type="text" name="mail" id="mail" alt="邮箱" onblur="checkEmail()"/>
    						<span id="mailSpan"></span>
    					</td>
    					
    				</tr>
    				<tr>
    					<td>性别:</td>
    					<td>男<input type="radio" name="sex" value="0" id="sex" checked="checked"/>
    						女<input type="radio" name="sex" value="1" id="sex"/>
    					</td>
    				</tr>
    				<tr>
    					<td>籍贯:</td>
    					<td><select name="address" id="address" onchange="checkAddress()" ">
    						<option value="美国">美国</option>
    						<option value="a" selected="selected">--请选择--</option>
    						<option value="英国">英国</option>
    						<option value="法国">法国</option>
    						<option value="不吉岛国">不吉岛国</option>
    					</select>
    					<span id="addressSpan"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>爱好:</td>
    					<td>
    						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>听歌
    						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>唱k
    						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>蹦迪<br />
    						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>看电影
    						<input type="checkbox" name="fav" id="" onclick="checkFav()"/>打球
    						<span id="favSpan"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>个人爱好:</td>
    					<td>
    						<textarea name="intro" id="intro" cols="30" rows="5"></textarea>
    					</td>
    				</tr>
    				<tr>
    					<td>验证码:</td>
    					<td><input type="text" name="code" id="code" style="width:100px;" onblur="checkCode()"/>
    						     
    						<span id="codeSpan" onclick="createCode()" style="background-image:url(../css学习/img/盾牌.jpg); cursor:pointer;color:yellow"></span>
    						<span id="codeSpan2"></span>
    						
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center"><input type="checkbox" name="" id="agree" onclick="checkAgree()" />是否同意本公司协议</td>
    				</tr>
    				<tr>
    					<td colspan="2" align="center"> <input type="submit" disabled="disabled" value="立即注册" id="sub" style="cursor:pointer;"/></td>
    				</tr>
    				
    			</table>
    			
    		</form>	
    			
    			
    			
    		</div>
    		
    		
    	</body>
    </html>