HTML表单提交验证实战：前端与后端交互-CSDN博客

本文链接：https://blog.csdn.net/youxizaixian123/article/details/118904543
html的简单表单提交

在这里插入图片描述
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
	</head>
	<body>
		<form action="http://lcoalhost" method="get" id="userForm">
			
			<input type="text" id="username" name="username" />
			<span id="usernameSpan">
				用户名
			</span>
			<br><br >
			<input type="password" id="password" name="password" />
			<span id="passwordSpan">
				密码
			</span>
			<br><br >
			<input type="password" id="dblpassword" name="dblpassword" />
			<span id="dblpasswordSpan">
				确认密码
			</span>
			<br><br >
			<input type="email" id="email" name="email" />
			<span id="emailSpan">
				邮箱
			</span>
			<br><br>
			<input type="button" id="sub" value="提交" />
			<input type="reset" id="reset" value="重置" />
		</form>
		
		<script type="text/javascript">
			
			
			
			var usernameReExp=/^[A-Za-z0-9]{6,14}$/;
			var passwordReExp=/^\S+$/;
			var dblpasswordReExp=/^\S+$/;
			var emailReExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			var usernameJud=false;
			var passwordJud=false;
			var dblpasswordJud=false;
			var emailJud=false;
				
			window.onload=function(){
				
				
				//用户名
				document.getElementById("username").onblur=function(){
					var username=document.getElementById("username").value;
					username=username.trim();
					if(usernameReExp.test(username)){
						document.getElementById("usernameSpan").style="color:green";
						document.getElementById("usernameSpan").innerText="用户名合法";
						usernameJud=true;	
					}else{
						document.getElementById("usernameSpan").style="color:red";
						document.getElementById("usernameSpan").innerText="用户名不合法";
						usernameJud=false;
					}
				}
				document.getElementById("username").onfocus=function(){
					 document.getElementById("usernameSpan").innerText="";
					 if(!usernameReExp.test(document.getElementById("username").value)){
						 document.getElementById("username").value="";
					 }
				}
				
				
				//密码
				document.getElementById("password").onblur=function(){
					var password=document.getElementById("password").value;
					if(passwordReExp.test(password)){
						document.getElementById("passwordSpan").style="color:green";
						document.getElementById("passwordSpan").innerText="密码合法";
						passwordJud=true;
					}else{
						document.getElementById("passwordSpan").style="color:red";
						document.getElementById("passwordSpan").innerText="密码不合法";
						passwordJud=false;
					}
				}
				document.getElementById("password").onfocus=function(){
					 document.getElementById("passwordSpan").innerText="";
					 if(!passwordReExp.test(document.getElementById("password").value)){
					 	document.getElementById("password").value="";
					 }
				}
				
				//确认密码
				document.getElementById("dblpassword").onblur=function(){
					 var password=document.getElementById("password").value;
					 var dblpassword=document.getElementById("dblpassword").value;
					 if(password===dblpassword&&dblpasswordReExp.test(dblpassword)){
						 document.getElementById("dblpasswordSpan").style="color:green";
						 document.getElementById("dblpasswordSpan").innerText="确认密码成功";
						 dblpasswordJud=true;
					 }else{
						 document.getElementById("dblpasswordSpan").style="color:red";
						 document.getElementById("dblpasswordSpan").innerText="确认密码失败";
						 dblpasswordJud=false;
					 }
				}
				document.getElementById("dblpassword").onfocus=function(){
					 document.getElementById("dblpasswordSpan").innerText="";
					 if(document.getElementById("dblpassword").value!=document.getElementById("password").value||!dblpasswordReExp.test(document.getElementById("dblpassword").value)){
					 	document.getElementById("dblpassword").value="";
					 }
				}
				
				
				//email
				document.getElementById("email").onblur=function(){
					var email=document.getElementById("email").value;
					if(emailReExp.test(email)){
						document.getElementById("emailSpan").style="color:green";
						document.getElementById("emailSpan").innerText="邮箱合法";
						emailJud=true;
					}else{
						document.getElementById("emailSpan").style="color:red";
						document.getElementById("emailSpan").innerText="邮箱不合法";
						emailJud=false;
					}
				}
				document.getElementById("email").onfocus=function(){
					 document.getElementById("emailSpan").innerText="";
					 if(!emailReExp.test(document.getElementById("email").value)){
					 	document.getElementById("email").value="";
					 }
				}
				
				
				function funA(){
					if(usernameJud){
						if(passwordJud){
							if(dblpasswordJud){
								if(emailJud){
									return true;
								}
							}
						}
					}else{
						return false;
					}
				}
				
				document.getElementById("sub").onclick=function(){
					if(funA()){
						 alert("正在提交");
						 document.getElementById("userForm").submit();
					}else{
						document.getElementById("sub").onclick=function(){
							alert("未完成填表");
							
						}	
					}
				}
				
				document.getElementById("reset").onclick=function(){
					document.getElementById("usernameSpan").style="color:black";
					document.getElementById("usernameSpan").innerText="用户名";
					document.getElementById("passwordSpan").style="color:black";
					document.getElementById("passwordSpan").innerText="密码";
					document.getElementById("dblpasswordSpan").style="color:black";
					document.getElementById("dblpasswordSpan").innerText="确认密码";
					document.getElementById("emailSpan").style="color:black";
					document.getElementById("emailSpan").innerText="邮箱";
					usernameJud=false;
					passwordJud=false;
					dblpasswordJud=false;
					mailJud=false;
				}
				
				//console.log(usernameJud,passwordJud,dblpasswordJud,emailJud)
			}
		</script>
	</body>
</html>