表单验证练习

最新推荐文章于 2022-04-24 10:11:53 发布

chh1ctrl

最新推荐文章于 2022-04-24 10:11:53 发布

阅读量360

点赞数

分类专栏： JS HTML 练习

本文链接：https://blog.csdn.net/chh1ctrl/article/details/116124843

版权

练习同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>程序创新大会报名</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
		margin:  auto;
		padding: 100px;
		background: blanchedalmond;
		}
		</style>
		<script>
	function validateName(){
		var name=document.getElementById("useName").value;
		var msg=document.getElementById("nameMsg");
		if(name==null ||name==""){
			msg.innerHTML="用户名不能为空"
			msg.style.color="red";
			return false;
		} else if(name.length<6){
			msg.innerHTML="用户名要大于6位";
			msg.style.color="red";
			return false;
		}else{
			msg.innerHTML="✔";
			msg.style.color="green";
			return true;
		}
	}
	function validatepassword(){
		var name=document.getElementById("password1").value;
		var msg=document.getElementById("pwdMsg1");
		if(name==null ||name==""){
			msg.innerHTML="密码不能为空"
			msg.style.color="red";
			return false;
		} else if(name.length<8){
			msg.innerHTML="密码要大于8位";
			msg.style.color="red";
			return false;
		}else{
			msg.innerHTML="✔";
			msg.style.color="green";
			return true;
		}
	}
	function confirmpwd(){
		var pwd1=document.getElementById("password1").value;
		var pwd2=document.getElementById("password2").value;
		var msg=document.getElementById("pwdMsg2");
		if(pwd2==null|| pwd2==""){
			msg.innerHTML="密码不能为空";
			msg.style.color="red";
			return false;
		}else if(pwd1==pwd2){
			msg.innerHTML="✔";
			msg.style.color="green";
			return true;
		}else {
			msg.innerHTML="请检查是否一致";
			msg.style.color="red";
			return false;
		}
	}
	function validategender(){
		var genderData=document.getElementById("gender").value;
		var msg=document.getElementById("gendermsg");
		if(genderData==-1){
			msg.innerHTML="性别必须选择";
			msg.style.color="red";
			return false;
		}else{
			msg.innerHTML="✔";
			msg.style.color="green";
			return true;
		}
	}
	function register(){
		return validateName()&&validatepassword()&&confirmpwd()&&validategender();//避免直接注册只有全为true时才可以注册
	}
</script>
	</head>
	<body>
<h1 style="text-align: center;">登入 </h1>
<div>
	<form action="index.html" method="get" onsubmit="register()">
	用户名:<input type="text" id="useName" placeholder="请输入用户名" onblur="validateName()"/>
		<span id="nameMsg">用户名为至少6位</span><br />
		密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatepassword()" />
		<span id="pwdMsg1">密码至少为8位</span><br />
		确认密码:<input type="password" id="password2" placeholder="请确认密码" onblur="confirmpwd()"/>
		<span id="pwdMsg2">确认密码一致</span><br />
		性别:<select id="gender" onblur="validategender()">
			<option value="-1">请选择性别</option>
			<option value="0">女</option>
			<option value="1">男</option>
		</select><span id="gendermsg"></span><br /><br />
		<button type="submit" >注册</button>
		<button type="reset">重置</button>
		
</form>		
</div>
	</body>
</html>