javascript写一个简单的表单校验

Myth丶恋晨 2022-05-26 04:18 164阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			//检查用户名是否正确
    			function checkName() {
    
    				//获取到输入框的颜色为白色
    				document.getElementById("username").style.backgroundColor = "white";
    				//获取到value值，并去空格，有变量接收
    				var username = document.getElementById("username").value.trim();
    				//定义正则，用户名为6-20位数字或字母
    				var regex = new RegExp("^\\w{6,20}$");
    				//判断用户输入的是否正确
    				if(regex.test(username)) {
    					//用户输入正确就不用提示，并返回true;
    					document.getElementById("usernameMsg").innerText = "";
    					return true;
    				} else {
    					//输入错误给出提示，并返回false
    					document.getElementById("usernameMsg").innerText = "用户名格式不正确";
    					return false;
    				}
    			}
    			//检查密码方法
    			function checkPWD() {
    				//离开时背景颜色为白色
    				document.getElementById("pass").style.backgroundColor = "white";
    				//alert("aa")
    				//获得用户输入值
    				var pwd = document.getElementById("pass").value.trim();
    				//定义正则
    				var regex = new RegExp("^\\d{6,8}$");
    				//判断正则是否正确
    				if(regex.test(pwd)) {
    					//正确返回true
    					document.getElementById("passwordMsg").innerText = "";
    					return true;
    				} else {
    					document.getElementById("passwordMsg").innerText = "密码格式不正确";
    					return false;
    				}
    			}
    			/*确认密码*/
    			function checkrep() {
    				document.getElementById("repass").style.backgroundColor = "white";
    				var repass = document.getElementById("repass").value.trim();
    				var pwd = document.getElementById("pass").value.trim();
    				if(repass == pwd) {
    					document.getElementById("passMsg").innerText = "";
    					return true;
    				} else {
    					document.getElementById("passMsg").innerText = "密码两次输入不一样";
    					return false;
    				}
    			}
    
    			//当用户点击正在输入框时，背景有变化(聚焦事件)
    			function showColor(ele) {
    				ele.style.backgroundColor = "lavenderblush ";
    			}
    
    			function checkBirth() {
    				/*获取到用户输入的日期并转成Date()类，并取得年、月、日*/
    				var da = document.getElementById("birth").value;
    				var hirthDate = new Date(da);
    				hirYear = hirthDate.getFullYear()
    				hirMonth = hirthDate.getMonth();
    				hirDay = hirthDate.getDate();
    				/*获取到当前日期，并取得年月日*/
    				var nowDate = new Date();
    				nowYear = nowDate.getFullYear();
    				nowMonth = nowDate.getMonth();
    				nowDay = nowDate.getDate();
    				//alert(nowYear-hirYear);
    				if(nowYear - hirYear >= 12) {
    					if(nowYear - hirYear == 12) {
    						if(nowMonth - hirMonth >= 0) {
    							if(nowDay - hirDay >= 0) {
    								document.getElementById("birthInfo").innerText = "";
    								return true;
    							} else {
    								document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
    								return false;
    							}
    							document.getElementById("birthInfo").innerText = "";
    							return true;
    						} else {
    							document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
    							return false;
    						}
    
    					} else {
    						document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
    						return false;
    					}
    				}
    				document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
    				return false;
    			}
    			/*定义方法，校验邮箱是否正确*/
    			function checkEmail() {
    				document.getElementById("email").style.backgroundColor = "white";
    				var email = document.getElementById("email").value.trim();
    				var regx = RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/);
    				if(regx.test(email)) {
    					document.getElementById("emailInfo").innerText = "";
    					return true;
    				} else {
    					document.getElementById("emailInfo").innerText = "邮箱格式不正确";
    					return false;
    				}
    			}
    
    			/*定义方法，当所有校验都返回true后才能提交表单*/
    			function checkForm() {
    				if(checkName() && checkPWD() && checkrep() && checkBirth()) {
    					return true;
    				} else {
    					return false;
    				}
    			}
    		</script>
    		<style>
    			.err {
    				color: red;
    			}
    			
    			#div1 {
    				text-align: center;
    			}
    			
    			#div2 {
    				margin: 0 auto;
    				width: 800px;
    				height: 600px;
    				border: 1px;
    				position: relative;
    				background-color: ivory;
    			}
    			
    			#username,
    			#pass,
    			#repass,
    			#birth,
    			#email {
    				width: 200px;
    				margin: 0px;
    				padding: 0px;
    			}
    			
    			.in {
    				height: 20px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="div1">
    			<div id="div2">
    				<h2>用  户  注  册</h2><br />
    				<form method="post" action="suc.html" οnsubmit=" return checkForm()">
    					
    					<p>    用户名：<input class="in" name="username" required placeholder="6-20位数字或字母" id="username" οnfοcus="showColor(this)" οnblur="checkName()" />
    
    					</p>
    
    					
    					<p>    密  码：<input class="in" id="pass" type="password" name="username" required οnblur="checkPWD()" οnfοcus="showColor(this)" placeholder="请输入密码" />
    
    					</p>
    
    					
    					<p>确认密码：<input type="password" class="in" id="repass" name="repassword" required οnblur="checkrep()" οnfοcus="showColor(this)" placeholder="请确认密码" /> </p>
    
    					
    					<p> 出生日期：<input type="date" class="in" id="birth" οnblur="checkBirth()" />
    
    					</p>
    
    					
    					<p>     邮  箱：<input class="in" id="email" οnfοcus="showColor(this)" οnblur="checkEmail()" placeholder="请输入邮箱地址" />
    					</p>
    
    					
    					<p><input type="submit" value="注册" /></p>
    				</form>
    				<span id="usernameMsg" class="err" style="position: absolute; top: 15%; left: 80%;  font-size: 15px;"></span>
    				<span id="passwordMsg" class="err" style="position: absolute; top: 21%; left: 80%; font-size: 15px;"></span>
    				<span id="passMsg" class="err" style="position: absolute; top: 28%; left: 80%; font-size: 15px;"></span>
    				<span id="birthInfo" class="err" style="position: absolute; top: 35%; left: 80%; font-size: 15px;"></span>
    				<span id="emailInfo" class="err" style="position: absolute; top: 42%; left: 80%; font-size: 15px;"></span>
    			</div>
    		</div>
    	</body>
    
    </html>