表单校验:使用正则表达式+dos+js事件

最新推荐文章于 2022-10-05 14:48:06 发布

瑾萱&

最新推荐文章于 2022-10-05 14:48:06 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42339746/article/details/125550982

版权

这部分一些标签及其给标签添加的事件

<body>
<div id="formDiv">
			<form   action="省市联动.html" onsubmit="checkAll()" method=get >
				<div id="userDiv">
					用&ensp;户&ensp;名:
					<input  type="text" id="username" onblur="checkUsername()" placeholder="请输入用户名"/>
					<span id="span_user"></span>
				</div>
				<div id="pwdDiv">
					<span>密&ensp;&ensp;&ensp;&ensp;码:</span>
					<input type="password" id="pwd" onblur="checkPwd()" placeholder="请输入密码" />
					<span id="sapn_pwd"></span>
				</div>
				<div id="repwdDiv">
					<span>确认密码:</span>
					<input   id="repwd" type="password"  onblur="checkRepwd()"  placeholder=" 两次密码一致"   />
					<span id="sapn_Repwd"></span>
				</div>
				<div id="emaliDiv">
					邮&ensp;&ensp;&ensp;&ensp;箱:<input   id="emali" type="emali" onblur="checkEmail()"    placeholder="请输入邮箱号码" />
					<span id="span_emali"></span>
				</div>
				<div id="btnDiv">
					<input style="margin-left: 50px;"  type="submit" value="注册" />
					<input  style="margin-left: 50px;"  type="reset" value="重置" />
				</div>
			</form>
		</div>
		
	</body>

这是使用的div+Css设置了盒子的模型

<style>
		#formDiv{
			border: 1px skyblue solid;
				width: 450px;
				height: 400px;	
				margin-left: 400px;
				margin-top: 90px;
				background-color: #87CEEB;
		}
		#userDiv{
			margin: 30px 0 30px 110px;
		}
		#pwdDiv{
			margin: 30px 0 0 110px;
		}
		#repwdDiv{
			margin: 30px 0 0 110px;
		
		}
		#emaliDiv{
			margin: 30px 0 0 110px;
		}
		#btnDiv{
			margin: 30px 0 0 110px;
		}
		
		</style>

利用script和正则表达式对我们的信息进行校验

<script>
	//校验用户名
	function checkUsername(){
		var username= document.getElementById("username").value;
		//2)获取id="span_user"的span标签对象
		var span=document.getElementById("span_user");
		//3)定义正则表达式
		var reg=/^[a-zA-Z0-9]{6,14}$/;
		if(reg.test(username)){
			span.innerHTML ="<strong>"+"用户名可用".fontcolor("green")+"</strong>" ;
			return true;
		}else if(username == ""){
			span.innerHTML = "";
		}else{
			span.innerHTML="<strong>"+"不可用".fontcolor("red")+"</strong>"
			return false;
		}
	}
	
	function checkPwd(){
	var password=	document.getElementById("pwd").value;
	var span=document.getElementById("sapn_pwd");
	var reg=/^[a-zA-Z0-9]{6,10}$/;
	if(reg.test(password)){
		span.innerHTML ="<strong>"+"密码合法".fontcolor("green")+"</strong>" ;
		return  true;
	}else if(username == ""){
		span.innerHTML = "";
	}else{
		span.innerHTML="<strong>"+"密码不可用".fontcolor("red")+"</strong>"
		return false;
	}
	}
	
	
	function checkRepwd(){
			var password=document.getElementById("pwd").value;
			//
		var repwd=	document.getElementById("repwd").value;
		var span=document.getElementById("sapn_Repwd");
		if(pwd==repwd){
			span.innerHTML="<strong>"+"密码合法".fontcolor("skyblue")+"</strong>";
			return true;
		}else{
			span.innerHTML="<strong>"+"密码不正确".fontcolor("skyblue")+"</strong>";
			return false;
		}
	}
	
	function checkEmail(){
		 var email=document.getElementById("emali").value;
		 var span=document.getElementById("span_emali");
		 var reg=/^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/ ;
		if(reg.test(email)){
			span.innerHTML ="<strong>"+"邮箱格式正确".fontcolor("green")+"</strong>" ;
			return true;
		}else if(username == ""){
			span.innerHTML = "";
		}else{
			span.innerHTML="<strong>"+"邮箱格式不正确".fontcolor("red")+"</strong>";
			return false;
		}
	}
	function checkAll(){
		if(checkUsername()&&checkPwd()&&checkRepwd()&&checkEmail()){
			return true;
		}else{
			return false;
		}
	}
	</script>

这是运行的最终结果