js 注册页面案例

最新推荐文章于 2022-09-06 20:49:23 发布
神奇大叔
最新推荐文章于 2022-09-06 20:49:23 发布
阅读量549
点赞数
分类专栏： javaScript 文章标签： javaScript
本文链接：https://blog.csdn.net/weixin_43294560/article/details/102945691
版权
javaScript 专栏收录该内容
127 篇文章 6 订阅
订阅专栏
校验
正则
封装
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()"/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<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>