前端(HTML+CSS+JavaScript) 多个表单验证。

最新推荐文章于 2023-03-04 14:09:12 发布

四维空间中的未知点

最新推荐文章于 2023-03-04 14:09:12 发布

阅读量876

点赞数

分类专栏：前端文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/CNSA183_20/article/details/121552304

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<!-- 初始化css -->
	<link rel="stylesheet" href="css/base.css">
	<!-- register css文件 -->
	<link rel="stylesheet" href="css/register.css">
	<style>
        .right{
            background-color: green;
        }
        
        .wrong{
            background-color: red;
        }
       </style>
</head>
<body>
	<div class="w">
		<!-- header -->
		<div class="header">
			<div class="logo">
				<a href="index.html">
				   <img src="img/logo.png" alt="">
				</a>
			</div>
		</div>
		<!-- registerarea -->
		<div class="registerarea">
			<h3>
				注册新用户
				<em>
					我有账号，去<a href="login.html">登陆</a>
				</em>
			</h3>
			<div class="reg_form">
				
			    <form action="demo.php">
			    	<ul>
					<li>
						<label for="tel">手机号:</label>
						<input type="text" class="inp1" id="inp1" onclick="phoneCheck()">
						<span class="inp1" id="inp1">手机号码输入</span>
					</li>
					<!-- <span class="error">		
							<i class="error_icon"></i>
						手机号码格式不正确，请从新输入  
						</span> -->
					<li>
						<label for="">短信验证码:</label>
						<input type="text" class="inp2" id="inp2" onclick="yzmCheck()">
					<span class="inp2" id="inp2">验证码输入</span>
					</li>
					<li>
						<label for="">登陆密码:</label>
						<input type="text" class="inp3" onclick="miCheck()">
						<!-- <span class="success">		
							<i class="success_icon"></i>
						恭喜您输入正确  
						</span> -->
						<span class="inp3" id="inp3">输入密码</span>
					</li>
					<li class="safe">
						安全程度 
						<em class="ruo">弱</em>
						<em class="zhong">中</em>
						<em class="qiang">强</em>	
					</li>

					<li>
						<label for="">确认密码:</label>
						<input type="text" class="inp4" onclick="miSure()">
						<!-- <span class="success" >		
							<i class="success_icon"></i>
						恭喜您输入正确  
						</span> -->
						<span id="inp4" class="inp4" id="inp4">密码输入</span>
					</li>
					<li class="agree">  

					  <input type="checkbox" >同意协议并注册
					  <a href="#">《知果果用户协议》</a>
					</li>
					<li>
						<input type="submit" value="完成注册" class="over">
					</li>
				</ul>
			    </form>
				
			</div>
		</div>
		<div class="footer">
			<p class="links">
				关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
			</p>

			<p class="copyright">
				地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
			</p>
		</div>
	</div>
     <script type="text/javascript">
        //验证手机号
        var rg=/^[a-zA-Z0-9_-]{6,11}$/;
		var inp1=document.querySelector('.inp1');
		var spaninp1=document.querySelector('span.inp1');
		inp1.phoneCheck=function() {
			if(rg.test(this.value)) {
				spaninp1.className='right';
				spaninp1.innerHTML='手机号输入格式合法';
			} else{
				spaninp1.className='wrong';
				spaninp1.innerHTML='手机号输入格式不合法';
			}
		}
        //验证验证码
        var reg=/^[a-zA-Z0-9_-]{4,7}$/;
		var inp2=document.querySelector('.inp2');
		var spaninp2=document.querySelector('span.inp2');
		inp2.yzmCheck=function() {
			if(reg.test(this.value)) {
				spaninp2.className='right';
				spaninp2.innerHTML='验证码输入格式合法';
			} else{
				spaninp2.className='wrong';
				spaninp2.innerHTML='验证码输入格式不合法';
			}
		}
        //验证密码
        var resg=/^[a-zA-Z0-9_-]{6,20}$/;
		var inp3=document.querySelector('.inp3');
		var spaninp3=document.querySelector('span.inp3');
		inp3.miCheck=function() {
			if(resg.test(this.value)) {
				spaninp3.className='right';
				spaninp3.innerHTML='密码输入格式合法';
			} else{
				spaninp3.className='wrong';
				spaninp3.innerHTML='密码输入格式不合法';
			}
		}
		//确认密码
		var resgs=/^[a-zA-Z0-9_-]{6,20}$/;
		var inp4=document.querySelector('.inp4');
		var spaninp4=document.querySelector('span.inp4');
		inp4.miSure=function() {
			if(resgs.test(this.value)) {
				spaninp4.className='right';
				spaninp4.innerHTML='密码输入一致';
			} else{
				spaninp4.className='wrong';
				spaninp4.innerHTML='两次密码输入不一致';
			}
		}
	</script>
</body>
</html>

CSS

.w {
	width: 1200px;
	margin: auto;
}
.header {
	height: 82px;
	border-bottom: 2px solid #b1191a;
}
.logo {
	padding-top: 15px;
}
.registerarea {
	height: 520px;
	border: 1px solid #ccc;
	margin-top: 20px;
}
.registerarea h3 {
	height: 40px;
	border-bottom: 1px solid #ccc;
	background-color: #ececec;
	padding: 0  10px;
	font-weight: 400;
	line-height: 40px;
	font-size: 18px;
}
.registerarea h3 em {
	float: right;
	font-size: 14px;
}
.registerarea a {
	color: #c81623;
}
.reg_form {
	width: 600px;
	height: 400px;
	margin: 40px auto 0;
}
.reg_form li {
	margin-bottom: 15px;
}
.reg_form label {
	display: inline-block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: right;
}
.inp1 {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
}
 .inp2 {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
}
.inp3 {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
}
.inp4 {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
}
.error {
	color: #df3033;
	margin-left: 10px;
}
.error_icon,
.success_icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/error.png) no-repeat;
	vertical-align: middle;
	margin-top: -2px;
}
.success {
	color: #40b83f;
	margin-left: 10px;
}
.success_icon {
	background-image: url(../img/success.png);
}
.safe {
	padding-left: 187px;
	color: #b2b2b2;
}
.safe em {
	padding: 0 12px;
	color: #fff;
}
.ruo {
	background-color: #de1111;
}

.zhong {
	background-color: #40b83f;
}

.qiang {
	background-color: #f79100;
}
.agree {
	padding-top: 20px;
	padding-left: 100px;
}
.agree  input {
	vertical-align: middle;
	margin-right: 5px;
}
.agree  a {
	color: #1ba1e6;
}
.over {
	width: 200px;
	height: 34px;
	background-color: #c81623;
	margin: 30px 0 0 130px;
	border: none;
	color: #fff;
	font-size: 14px;

}
.footer {
	height: 120px;
	text-align: center;
}
.links {
	margin-top: 20px;
	height: 30px;
}
.copyright {
	line-height: 20px;
}

页面效果