JS—简单表单验证代码

最新推荐文章于 2022-08-01 11:58:39 发布

wanguo_S

最新推荐文章于 2022-08-01 11:58:39 发布

阅读量460

点赞数

文章标签： javascript js html css css3

本文链接：https://blog.csdn.net/w_guo_S/article/details/104547566

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 280px;
				margin: 20px auto;
				border: 1px solid #333333;
				text-align:center;
				padding: 10px 0px;
			}
			#box span{
				display: block;
				height: 20px;
				font-size: 12px;
				color: #808080;
				text-align: right;
				padding: 0px 18px;
			}
			</style>
	</head>
	<body>
		<div id="box">
			输入密码：<input type="text" name="" id="tex1" value="" /><span></span>
			
			再次输入：<input type="text" name="" id="tex2" value="" /><span></span>
			
		手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" name="" id="tex3" value="" /><span></span>
			
			<button type="button">按钮</button>
		</div>
		<script type="text/javascript">
//==============================
	var tex1=document.querySelector("#tex1");
	var tex2=document.querySelector("#tex2");
	var tex3=document.querySelector("#tex3");
	var btn=document.querySelector("#box button");
	var tex1OnOff=tex2OnOff=tex3OnOff=false;
	tex1.oninput=function(){
		var a=b=c=0;
		var igReg=/^.{6,12}$/;
		if(!igReg.test(this.value)){
			this.nextElementSibling.innerHTML="请输入6-12位密码";
			tex1OnOff=false;
			return;
		}
		var numReg=/\d/;
		if(numReg.test(this.value)){
			a=1;
		}
		var azReg=/[a-z]/i;
		if(azReg.test(this.value)){
			b=1;
		}
		var tsReg=/[^\da-z]/i;
		if(tsReg.test(this.value)){
			c=1;
		}
		switch(a+b+c){
			case 1:
			this.nextElementSibling.innerHTML="简单";break;
			case 2:
			this.nextElementSibling.innerHTML="一般";break;
			case 3:
			this.nextElementSibling.innerHTML="安全";break;
		}
		tex1OnOff=true;
		
		if(tex2.value==="")return;
		
		if(this.value===tex2.value){
			tex2.nextElementSibling.innerHTML="密码输入一致";
			tex2OnOff=true;
		}else{
			tex2.nextElementSibling.innerHTML="密码输不入一致";
			tex2OnOff=false;
			}
		}
		tex2.oninput=function(){
			if(this.value===tex1.value){
				this.nextElementSibling.innerHTML="密码输入一致";
				tex2OnOff=true;
			}else{
				this.nextElementSibling.innerHTML="密码输不入一致";
				tex2OnOff=false;
			}
		}
		tex3.oninput=function(){
			var callReg=/^1[3-9]\d{9}$/;
			if(callReg.test(this.value)){
				this.nextElementSibling.innerHTML="符合";
				tex3OnOff=true;
			}else{
				this.nextElementSibling.innerHTML="不符合";
				tex3OnOff=false;
			}
		}
		btn.onclick=function(){
			if(tex1OnOff&&tex2OnOff&&tex3OnOff){
				alert("验证成功");
				return;
			}
			if(!tex1OnOff){
				alert("密码错误");
				return;
			}
			if(!tex2OnOff){
				alert("验证密码错误");
				return;
			}
			if(!tex3OnOff){
				alert("请输入正确的手机号码");
				return;
			}
		}	
		</script>
</html>