实现简单的表单验证提交

最新推荐文章于 2022-08-17 14:57:49 发布

Ylk_IT

最新推荐文章于 2022-08-17 14:57:49 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/ylk_manong/article/details/118613331

版权

实现简单的表单验证提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			*{
				margin: 0;
				padding: 0;
			}
			form{
				margin: 0 auto;
				background: #ccc;
				width: 600px;
			}
      		input{outline: none;}
			input{
				margin-top: 10px;
				margin-left: 10px;
				width: 200px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<form action="5-22作业.html" method="get" id="form">
			账号<input type="text"id="zh"><span>请输入6-24为数字/字母或下划线（不能含有空格）</span>
			<br>
			电话<input type="text"id="dh" /><span>请输入正确的号码格式</span>
			<br>
			密码<input type="text"id="mima" /><span>请输入6-16为数字/字母或下划线（不能含有空格）</span>
			<br>
			确认密码<input type="text"id="queren" /><span>请确认两次输入的密码一致</span>
			<br>
			<input type="submit"/>
		</form>


		<script>
			var form=document.getElementById("form");
			var zh=document.getElementById("zh");
			var dh=document.getElementById("dh");
			var mima=document.getElementById("mima");
			var queren=document.getElementById("queren");
			function fn(id,idreg){
				id.onfocus=function(){
					id.style.border="none";
					id.style.border="1px solid blue";
				}
				id.onblur=function(){
					if (idreg.test(id.value)) {
						id.style.border="1px solid green";
					} else{
						id.style.border="1px solid red";
					}
				}
			}
			var zhreg=/^(?![0-9]+$)\w{6,24}$/;
			fn(zh,zhreg);
			var dhreg=/^1[35689][0-9]{9}$/;
			fn(dh,dhreg);
			var mimareg=/^(?![0-9]+$)\w{6,16}$/;
			fn(mima,mimareg);

			queren.onfocus=function(){
				queren.style.border="none";
				queren.style.border="1px solid blue";
			}
			queren.onblur=function(){
				if (queren.value==mima.value) {
					queren.style.border="1px solid green";
				} else{
					queren.style.border="1px solid red";
				}
			}
			form.onsubmit=function(){
				console.log(!zhreg.test(zh.value));
				console.log(!dhreg.test(dh.value));
				console.log(!mimareg.test(mima.value))
				console.log((queren.value!=mima.value));
				if (!zhreg.test(zh.value)||!dhreg.test(dh.value)||!mimareg.test(mima.value)||(queren.value!=mima.value)) {
					alert('表单不正确');
					return false;
				}else{
					alert('注册成功');
				}
			};

			var  re=/^(?![0-9]+$)\w{6,24}$/g;
			ipt3.onblur=function(){
				console.log(re.test(ipt3.value));
			}
			btn.onclick=function(){
				console.log(re.test(ipt3.value));
			}
		</script>
	</body>
</html>