【代码】表单验证

最新推荐文章于 2022-10-26 08:00:00 发布

Trouble=Maker

最新推荐文章于 2022-10-26 08:00:00 发布

阅读量252

点赞数

文章标签： elementui webview vue.js

本文链接：https://blog.csdn.net/weixin_52226593/article/details/122612275

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		span{
			color: #FF0000;
		}
		</style>
	</head>
	<body>
		<form action = "#" method="get" id="form">
			用户名：<input type="text" name="username" id="username" onblur="checkUsername()">
			<img id="truename"  src="img/gou.png" width="10" height="10" style="display: none;">
			<span id="username_err" style="display: none;">用户名格式错误</span>
			<br>
			密码：<input type="text" name="password" id="password" onblur="checkPassword()">
			<img id="truepassword"  src="img/gou.png" width="10" height="10" style="display: none;">
			<span id="password_err" style="display: none;">密码格式错误</span><br>
			电话：<input type="test" name="tel" id="tel" onblur="checkTel()">
			<img id="truetel"  src="img/gou.png" width="10" height="10" style="display: none;">
			<span id="tel_err" style="display: none;">电话格式错误</span><br>
			<input type="submit">
		</form>
		<script>
		function checkUsername(){
			let username = document.getElementById("username").value;
			let regex = /^[A-Za-z]\w{6,10}$/
			// 判断用户名是否符合规则
			if (regex.test(username)) {
				// 如果符合规则就展示图片，隐藏警告
				document.getElementById("truename").style.display = "";
				document.getElementById("username_err").style.display = "none";
				return true;
			}else{
				// 如果不符合规则就展示警告，隐藏图片
				document.getElementById("truename").style.display = "none";
				document.getElementById("username_err").style.display = "";
				return false;
			}
		}
		
		function checkPassword(){
			let password = document.getElementById("password").value;
			let regex = /^\w{6,12}$/;
			if (regex.test(password)) {
				document.getElementById("truepassword").style.display = "";
				document.getElementById("password_err").style.display = "none";
				return true;
			}else{
				document.getElementById("truepassword").style.display = "none";
				document.getElementById("password_err").style.display = "";
				return false;
			}
		}
		
		function checkTel(){
			let tel = document.getElementById("tel").value;
			let regex = /^1[3-9]\d{9}$/;
			if (regex.test(tel)) {
				document.getElementById("truetel").style.display = "";
				document.getElementById("tel_err").style.display = "none";
				return true;
			}else{
				document.getElementById("truetel").style.display = "none";
				document.getElementById("tel_err").style.display = "";
				return false;
			}
		}
		// 每一个函数都会返回一个boolean值，当所有函数判断正确的时候就可以将数据传输到后台
		document.getElementById("form").onsubmit = function() {
			return checkUsername() && checkPassword() && checkTel();
		}
		
		</script>
		
	</body>
</html>

效果展示

输入错误

输入正确

Trouble=Maker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【代码】表单验证

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> span{ color: #FF0000; } </style> </head> <body> <form action = "#" method="get" id="form"> .
复制链接

扫一扫