表单的正则判断

前端页面中表单的正则判断，其中包括姓名、手机号、邮箱等，根据页面功能来定。下面是对姓名、手机号、邮箱的正则判断。
当输入框失焦时，判断输入的内容正确与否；若为空或格式有误，
一、在输入框下面提示相应的信息
HTML：

<div class="index_con">
	<div class="index_ipt">
		<div class="ipt name">
			<label>姓名</label>
			<input class="ipt_name" type="text" name="name" id="name" placeholder="请输入您的姓名" />
			<span class="span1"></span>
		</div>
		<div class="ipt tel">
			<label>手机</label>
			<input class="ipt_phone" type="text" name="tel" id="tel" placeholder="请输入您的手机号" />
			<span class="span2"></span>
		</div>
		<div class="ipt email">
			<label for="">电子邮件</label>
			<input class="ipt_email" type="text" placeholder="请输入您的邮箱" />
			<span class="span3"></span>
		</div>
		<input class="apply" type="submit" name="" id="" value="立即申请" />
		<span class="txt"></span>
	</div>
</div>

CSS：

input {
	border: 0;
}
label {
	display: inline-block;
}
.index_con {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 30px;
}
.index_ipt {
	margin: 20px auto 0;
}
.index_ipt>div {
	margin-bottom: 30px;
}
.index_ipt span {
	color: #fff;
	font-size: 14px;
	display: block;
	padding: 10px 0;
}
.index_ipt div.ipt {
	height: 45px;
	background-color: #fafafa;
	padding: 5px 0;
	box-sizing: border-box;
}
.index_ipt div.ipt label {
	text-align: center;
	line-height: 30px;
}
.ipt.name label,
.ipt.tel label {
	width: 20%;
}
.ipt.address label {
	width: 30%;
}
.index_ipt div.ipt input {
	line-height: 30px;
	height: 100%;
	background-color: #fafafa;
	resize: none;
	color: #333;
	font-size: 16px;
}
.ipt.name input,
.ipt.tel input {
	width: 75%;
}
.ipt.address input {
	width: 65%;
}
.index_ipt div.ipt input:focus {
	border: 1px solid #b69c61;
}
::-webkit-input-placeholder {
	/* WebKit browsers */
	color: #888;
	font-size: 16px;
}
:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #888;
	font-size: 16px;
}
::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #888;
	font-size: 16px;
}
:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	color: #888;
	font-size: 16px;
}

JS：

<script type="text/javascript">
	//正则
	var name1 = document.querySelector(".ipt_name");
	var span1 = document.querySelector(".span1");
	var phone = document.querySelector(".ipt_phone");
	var span2 = document.querySelector(".span2");
	var phone = document.querySelector(".ipt_email");
	var span2 = document.querySelector(".span3");
	var tj1 = false;
	var tj2 = false;
	var tj3 = false;
	//姓名
	var re_name = /^[\u4E00-\u9FA5]{2,4}$/;
	name1.onblur = function() {
		var str = this.value;
		if(re_name.test(str)) {
			var tj1 = true;
			span1.innerHTML = "";
		} else {
			span1.innerHTML = "输入格式有误";
		}
		if(str == "") {
			span1.innerHTML = "请输入姓名";
		}
	}
	//手机号
	var re_phone = /^[1]([3-9])[0-9]{9}$/;
	phone.onblur = function() {
		var str = this.value;
		if(re_phone.test(str)) {
			var tj2 = true;
			span2.innerHTML = "";
		} else {
			span2.innerHTML = "输入格式有误";
		}
		if(str == "") {
			span2.innerHTML = "请输入手机号";
		}
	}
	//邮箱
	var re_name = /^[a-z]\w{5,17}$/i;
	name1.onblur = function() {
		var str = this.value;
		if(re_name.test(str)) {
			var tj1 = true;
			span1.innerHTML = "";
		} else {
			span1.innerHTML = "输入格式有误";
		}
		if(str == "") {
			span1.innerHTML = "请输入邮箱";
		}
	}
	var apply = document.querySelector(".apply");
	var txt = document.querySelector(".index_ipt .txt");
	apply.onclick = function() {
		var str1 = name1.value;
		var str2 = phone.value;
		if(str1 == "" || str2 == ""|| str3 == "") {
			txt.innerHTML = "请填入完整的信息";
		} else {
			txt.innerHTML = "";
		}
	}
</script>

二、弹出框提示相应的信息

如有错误请各位大神评论指教……

• 点赞
• 收藏
• 分享
• • 文章举报

茶憶 发布了10 篇原创文章 · 获赞 2 · 访问量 381 私信 关注

标签：index,判断,str,innerHTML,表单,正则,ipt,var,input
来源： https://blog.csdn.net/weixin_44711440/article/details/103646284