JS正则表达式，表单验证（二）

最新推荐文章于 2021-08-05 21:14:31 发布

南宫廿贰

最新推荐文章于 2021-08-05 21:14:31 发布

阅读量468

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102569183

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

使用正则表示式对页面登录验证第二版

1.当每个输入框失去焦点后就做校验
2.只有所有正则表达式都通过验证才可以提交表单
HTML代码：
我表单提交的是菜鸟教程编辑器，大家可以试试哦！
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				font-size: 11px;
			}			
		</style>
		<script src="js/verify.js"></script>
		<!-- onsubmit是表单提交事件,在点击登录时触发,若该方法返回true,
		则提交表单,返回false则不提交,起到拦截的作用 -->
	</head>
	<body>
		<!--提交的表单地址是菜鸟教程的大家可以去那里学习-->
		<form action="https://www.runoob.com/try/try.php?filename=tryjsref_onsubmit" method="post" onsubmit="return (verifyName()+verifyPwd()+verifyConfirmPwd()+verifyEmail()+verifyPhone()+verifyEID()+verifyAddress())==7">
			<table align="center" border="1" style="border-collapse: collapse;">
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="name" onblur="verifyName()" />
					<span id="nameResult">大写字母开头 6-20位字符(不允许有符号但是允许有_)</span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="text" id="pwd" onblur="verifyPwd()" />
					<span id="pwdResult">大写开头 数字字母符号混合 8-15位</span></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="text" id="confirmPwd" onblur="verifyConfirmPwd()" />
					<span id="confirmPwdResult">大写开头 数字字母符号混合
							8-15位</span></td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td><input type="text" id="email" onblur="verifyEmail()" />
					<span id="emailResult">邮箱格式</span></td>
				</tr>
				<tr>
					<td>手机号:</td>
					<td><input type="text" id="phone" onblur="verifyPhone()" />
					<span id="phoneResult">手机号格式</span></td>
				</tr>
				<tr>
					<td>身份证号:</td>
					<td><input type="text" id="eID" onblur="verifyEID()" />
					<span id="eIDResult">身份证号格式</span></td>
				</tr>
				<tr>
					<td>地址:</td>
					<td><input type="text" id="address" onblur="verifyAddress()" />
					<span id="addressResult">中文开头 数字 - 字母 中文混合</span></td>
				</tr>
				<tr>
					<td colspan="2" align="center" height="36px"><input type="submit" style="width: 8rem;height: 2rem;" value="提交登录验证" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

onblur表单事件，元素失去焦点时触发；
每个输入框的内容都通过正则表达式的校验，在失去焦点时验证
JS代码：

function verifyName() {
	//用户名校验
	var verifyName = document.getElementById("name").value;
	var span = document.getElementById("nameResult");
	var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/;
	if (!name.test(verifyName)) {
		//如果没有匹配增加错误样式
		span.style.color = "red";
		return false;
	} else {
		//如果匹配成功增加正确样式
		span.style.color = "green";
		return true;
	}
}
//onsubmit是表单提交事件,在点击登录时触发,若该方法返回true,
//则提交表单,返回false则不提交,起到拦截的作用
function verifyPwd() {
	//密码
	var verifyPwd = document.getElementById("pwd").value;
	var span = document.getElementById("pwdResult");
	var pwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
	if (!pwd.test(verifyPwd)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}

function verifyConfirmPwd() {
	//确认密码
	var verifyConfirmPwd = document.getElementById("confirmPwd").value;
	var span = document.getElementById("confirmPwdResult");
	var confirmPwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/;
	if (!confirmPwd.test(verifyConfirmPwd)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}

function verifyEmail() {
	//邮箱
	var verifyEmail = document.getElementById("email").value;
	var span = document.getElementById("emailResult");
	var email = /^[A-z0-9]+@[a-z0-9]+.com$/;
	if (!email.test(verifyEmail)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}

function verifyPhone() {
	//手机号
	var verifyPhone = document.getElementById("phone").value;
	var span = document.getElementById("phoneResult");
	var phone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
	if (!phone.test(verifyPhone)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}

function verifyEID() {
	//身份证号
	var verifyEID = document.getElementById("eID").value;
	var span = document.getElementById("eIDResult");
	var eID = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	if (!eID.test(verifyEID)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}

function verifyAddress() {
	//地址
	var verifyAddress = document.getElementById("address").value;
	var span = document.getElementById("addressResult");
	var address = /^[\u4E00-\u9FA50-9A-Za-z\u4E00-\u9FA5]+$/;
	if (!address.test(verifyAddress)) {
		span.style.color = "red";
		return false;
	} else {
		span.style.color = "green";
		return true;
	}
}