正则验证百度登录,表单验证,登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			*{margin: 0;padding: 0;}
			lu il{list-style: none;}
			html,body{width: 100%;height: 100%;}
		#box{
			width: 100%;
			height: 100%;
			background: #fff;
		}
		#box .logo{
			width: 100%;
			height: 70px;
			border-bottom: 1px solid #ebebeb;
			margin: 0 auto;
		}
		#box .logo .left{
			width:280px ;
			height: 70px;
			margin-left: 150px;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		#box .logo .left h1{
			width: 135px;
			height: 44px;
			background-image: url(logo.png);
			background-size: 100% 100%;
		}
			#box .logo .left p{
				margin-top: 22px;
				height: 24px;
				font-size: 16px;
				line-height: 24px;
				padding-left:20px ;
				border-left: 1px solid #c9c9c9;
			}
				#box form{
					width: 700px;
					height: 340px;
					
					margin: 80px auto;
				}
				#box form input{
					margin-top: 22px;
				}
				
				#box form em{
					font-size: 14px;
					display: inline-block;
					width: 60px;
					text-align: right;
					margin-right: 12px;
					
					
				}
				#box form input:nth-of-type(1),form input:nth-of-type(2),form input:nth-of-type(3){
					margin-top: 10px;
					width: 348px;
					height: 40px;
					font-size: 14px;
					line-height: 40px;
					
				}
				#box form input:nth-of-type(4){
					margin-top: 10px;
					width: 178px;
					height: 40px;
					font-size: 14px;
					line-height: 40px;
					
				}
					#box form input:nth-of-type(5){
						margin-top: 10px;
						width: 161px;
						height: 40px;
						margin-left: 10px;
						border: 2px solid #dcdcdc;
					}
					
						#box p{
							font-size: 12px;
						display: inline-block;
							}
					#box form input:nth-of-type(6){
					margin-left: 70px;
					}
					#box form input:nth-of-type(7){
						width: 354px;
						height: 40px;
						background: blue;
						margin-left: 70px;
					}
				#box span{
					color:yellowgreen;
					font-size: 12px;
				padding-left: 20px;
					
				}
				.bg{
					background:url(yes.png) no-repeat;    // 当验证正确时显示图片
					margin-left: 5px;
				}
				.bgg{
					background:url(no.png) no-repeat;      // 当验证错误时显示图片
					margin-right: 5px;
				}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="logo">
				<div class="left">
					<h1></h1>
					<p>注册百度账号</p>
				</div>
			</div>
			<form action="" method="">
				<em>用户名:</em><input type="text" name="" id="" placeholder="请输入用户名" /><span></span><br/>
				<em>手机号:</em><input type="text" name="" id="" placeholder="请输入手机号" /><span></span><br/>
				<em>密码:</em><input type="text" name="" id=""placeholder="请输入密码" /><span></span><br/>
				<em>验证码:</em><input type="text" name="" id="" placeholder="请输入验证码" /><input type="submit" name="" id="" value="获取短信验证码" /><span></span><br/>
				<input type="checkbox" name="" id="" value=/><p>阅读百度百度用户一节个人隐私</p><br/>
				<input type="submit" name="" id="" value="注册" />
			</form>
		</div>
		<script type="text/javascript">
				var form = document.querySelector("form")
				var input = document.querySelectorAll("input");
				var sp = document.querySelectorAll("span");
				var user = 	/^[\u4e00-\u9fa5]{1,6}$/;
				var sj = /^1[3-9][0-9]{9}$/;
				var password  = /^[a-z0-9A-Z_-]{8,14}$/;
				var yzm = /^\d{4}$/
				var spp=["设置后不可更改,最长6个汉字","请输入中国大陆手机号","可以有数字,字母 空格,8-14位","请输入四位数的手机验证码"];
				//设置鼠标获取焦点时候的样式:
				spp.forEach(function(value,index){
					input[index].onfocus=function() {
						//当鼠标滑入第一个input的时候,span的样式显示出来
						sp[index].innerHTML = spp[index]
						//设置span的文字颜色
						sp[index].style.color ="#757575"
			}	
		})
		//将上面的正则表达式放到一个组长里面(变量不加引号)
			var sdd = [user,sj,password,yzm]
			//遍历上面数组
			sdd.forEach(function(value,index){
				//当第一个input失去焦点的时候,执行以下代码
				input[index].onblur = function(){
				
					//input.value的值为空则不验证  ,直接退出循环
					if(input[index].value == ""){
						return false
					}else{
						
						//将以下代码传入函数中去
						    //元素input[0,1,2,3]  元素span[0,1,2,3]   sdd 的值[0,1,2,3](就是上见面的正则公式)
						tab(input[index],sp[index],sdd[index]);	
						
					}
					
				}
				
			})
		
			//这里是上面传进来的值       yz就表示sdd的正则表达式公式  { index [0]	ar user =/^[\u4e00-\u9fa5]{1,6}$/  } { index [2]  sj = /^1[3-9][0-9]{9}$/;}
				function tab( input,sp,yz){
											//检测 用公式检测input的值 时候符合  如果满足就执行if里面的语句,否则执行 else
										if(yz.test(input.value)){
											sp.innerHTML = "";
											sp.className = "bg";
										}else{
											sp.innerHTML = "您那你错啦错啦,请重新输入";
											sp.style.color = "red";
											sp.className = "bgg";
										}
								}
								
								
			
		
		</script>
	</body>
</html>

你可能感兴趣的:(正则验证百度登录,表单验证,登录页面)