form表单验证实例（onsubmit）

最新推荐文章于 2022-04-16 17:45:48 发布

哦SuY

最新推荐文章于 2022-04-16 17:45:48 发布

阅读量405

点赞数

本文链接：https://blog.csdn.net/weixin_43755857/article/details/107322027

版权

表单验证

注意：

οnsubmit=“return infoConfirm()” 返回结果为true时，才能成功提交表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="bom-04 history01.html" method="get" onsubmit="return infoConfirm()">
			<table>
				<tr>
					<td>姓名</td>
					<td><input type="text" id="nameId" name="name"></td>
					<td><span id="nameAttr" class="addr"></span></td>
				</tr>
				<tr>
					<td>手机号</td>
					<td><input type="text" name="tel" id="telId"></td>
					<td><span id="telAttr" class="addr"></span></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" name="pwd" id="pwdId"></td>
					<td><span id="pwdAttr" class="addr"></span></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="pwd2" id="pwdId2"></td>
					<td><span id="pwdAttr2" class="addr"></span></td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td><input type="email" name="email" id="emailId"></td>
					<td><span id="emailAttr" class="addr"></span></td>
				</tr>
				<tr>
					<td><input type="reset" value="重置"></td>
					<td><input type="submit" value="提交"></td>
				</tr>
			</table>
		</form>
	</body>
	<script>
		/* 
			失去焦点
			获取焦点
		 */
		function infoConfirm(){
			//1.获取input对象
			var nameInput = document.getElementById("nameId");
			// nameInput.value  获取Input输入框中的内容
			console.log(nameInput.value);
			var name = nameInput.value;
			if(name ==null || name == ""){
				var span = document.getElementById("nameAttr");
				span.innerText = "用户名不能为空";
				span.style.color = "red";
				return false;
			}
			
			//验证手机号码
			var inputTel = document.getElementById("telId");
			var tel = inputTel.value;
			if(tel == null || tel == ""){
				var span = document.getElementById("telAttr");
				span.innerText = "手机号码不能为空";
				span.style.color = "red";
				return false;
			}
			/* 如果手机号码存在，通过正则表达式判断格式 */
			var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
			if(!reg.test(tel)){
				var span = document.getElementById("telAttr");
				span.innerText = "手机号码格式错误";
				span.style.color = "red";
				return false;
			}
			//验证密码，至少6位
			var inputPwd = document.getElementById("pwdId");
			var pwd = inputPwd.value;
			if(pwd == null || pwd == ""){
				var span = document.getElementById("pwdAttr");
				span.innerText = "密码不能为空";
				span.style.color = "red";
				return false;
			}
			/* 如果密码存在，通过正则表达式判断格式 */
			var reg2 = /^[a-zA-Z0-9]{6,}$/;
			if(!reg2.test(pwd)){
				var span = document.getElementById("pwdAttr");
				span.innerText = "密码格式错误";
				span.style.color = "red";
				return false;
			}
			//确认密码
			var inputPwd2 = document.getElementById("pwdId2");
			var pwd2 = inputPwd2.value;
			if(pwd2 == null || pwd2 == ""){
				var span = document.getElementById("pwdAttr2");
				span.innerText = "确认密码不能为空";
				span.style.color = "red";
				return false;
			}
			/* 如果确认密码存在，进行判断 */
			if(pwd2 != pwd){
				var span = document.getElementById("pwdAttr2");
				span.innerText = "确认密码与密码不一致";
				span.style.color = "red";
				return false;
			}
			//验证邮箱
			var inputEmail = document.getElementById("emailId");
			var email = inputEmail.value;
			if(email == null || email == ""){
				var span = document.getElementById("emailAttr");
				span.innerText = "邮箱不能为空";
				span.style.color = "red";
				return false;
			}
			/* 如果邮箱存在，通过正则表达式判断格式 */
			var reg3 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			if(!reg3.test(email)){
				var span = document.getElementById("emailAttr");
				span.innerText = "邮箱格式错误";
				span.style.color = "red";
				return false;
			}
		}
	</script>
</html>