首页 > 经验记录 > JavaScript表单提交验证(顺便仿了下阿里云注册界面)

JavaScript表单提交验证(顺便仿了下阿里云注册界面)


长这样(看不清的话就右键:在新标签中打开图片)
也可以点击跳转我做的这个网页
 
 
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0px;
				height: 100%;
			}
			#div1{
				height: 77%;
				background-color: whitesmoke;
			}
			#div1 h1{
				float: left;
				margin: 10px;
			}
			#div1 span{
				float: right;
				margin: 20px;
			}
			#div1_1{
				background-color: white;
				width: 50%;
				height: 70%;
				margin: 0 auto;
				margin-top: 5%;
				position: relative;
			}
			#div2{
				height: 27%;
				background-color: #373d41;
			}
			form{
				width: 35%;
				margin: 0 auto;
				height: 80%;
			}
			form input{
				height: 8%;
				width: 100%;
				margin-bottom: 5%;
			}
			#sumbitInput{
				height: 10%;
				margin-top: 10%;
				background-color: royalblue;
				border: 0px;
				color: white;
			}
			input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
			.spanColor{
				color: red;
			}
			#div2_2{
				width: 70%;
				margin: 0 auto;
				margin-top: 1%;
			}
			#div2_2 a{
				color: gainsboro;
				text-decoration: none;
				margin-right: 2%;
			}
		</style>
		<script type="text/javascript">
			//效验用户名
			function checkName(){
				var username=document.getElementById("username").value;
				var regex = new RegExp("^\\w{6,20}$");
				if(regex.test(username)){
					document.getElementById("username").style.border="1px solid blue";
					document.getElementById("usernameMes").innerText="";
					return true;
				}else{
					document.getElementById("username").style.border="1px solid red";
					document.getElementById("usernameMes").innerText="  您输入的用户名格式不正确";
					return false;
				}
			}
			//效验密码
			function checkPassWord(){
				checkPassWord2();
				var password=document.getElementById("password").value;
				var regex = new RegExp("^\\w{6,10}$");
				if(regex.test(password)){
					document.getElementById("password").style.border="1px solid blue";
					document.getElementById("passwordMes").innerText="";
					return true;
				}else{
					document.getElementById("password").style.border="1px solid red";
					document.getElementById("passwordMes").innerText="  您输入的密码格式不正确";
					return false;
				}
			}
			//效验确认密码
			function checkPassWord2(){
				var password=document.getElementById("password").value;
				var password2=document.getElementById("password2").value;
				if(password2==password){
					document.getElementById("password2").style.border="1px solid blue";
					document.getElementById("passwordMes2").innerText="";
					return true;
				}else{
					document.getElementById("password2").style.border="1px solid red";
					document.getElementById("passwordMes2").innerText="  您输入的密码不相同";
					return false;
				}
			}
			//效验出生日期
			function checkBirthday(){
				var birthday=document.getElementById("birthday").value;
				date1 = new Date(birthday);//获取input标签输入的时间
				date2 = new Date();//获取当前时间
				if(date2.getFullYear()-date1.getFullYear()>=18){
					if(date2.getFullYear()-date1.getFullYear()==18){
						if(date2.getMonth()-date1.getMonth()>0){
							document.getElementById("birthday").style.border="1px solid blue";
							document.getElementById("birthdayMes").innerText="";
							return true;
						}else if(date2.getMonth()-date1.getMonth()==0){
							if(date2.getDate()-date1.getDate()>=0){
								document.getElementById("birthday").style.border="1px solid blue";
								document.getElementById("birthdayMes").innerText="";
								return true;
							}
						}
					}else{
						document.getElementById("birthday").style.border="1px solid blue";
						document.getElementById("birthdayMes").innerText="";
						return true;
					}
				}
				document.getElementById("birthday").style.border="1px solid red";
				document.getElementById("birthdayMes").innerText="  未满十八禁止进站";
				return false;
			}
			//判断是否提交表单
			function checkAll(){
				if(checkName() && checkPassWord() && checkPassWord2() && checkBirthday()){
					return true;
				}else{
					alert("有填写错误的项");
					return false;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div style="border: 1xp solid black; height: 9%;">
				<h1>首页</h1>
				<span>关于</span>
				<span>首页</span>
			</div>
			<div style="clear: both;"></div>
			<hr style="margin: 0px;" />
			<div id="div1_1">
				<p align="center" style="font-size: 2em; padding-top: 3%;">欢迎注册妙妙屋</p>
				<form method="get" action="../test/test1.html" onsubmit="return checkAll()">
					<input
						placeholder="设置会员名 :  6-20位字母或数字组成"
						id="username"
						name="username"
						onblur="checkName()"
						onfocus=""
						require
						/>
					<input
						placeholder="设置密码 :  6-10位字母或数字组成"
						id="password"
						name="password"
						required
						onblur="checkPassWord()"
						onfocus=""
						require
						/>
					<input
						placeholder="确认密码"
						id="password2"
						name="password2"
						required
						onblur="checkPassWord2()"
						onfocus=""
						require
						/>
					<input
						type="date"
						id="birthday"
						name="birthday"
						required
						onblur="checkBirthday()"
						onfocus=""
						require
						/>
					<input id="sumbitInput" type="submit" value="同意霸王条款并注册"/>
				</form>
				<div style="position: absolute; top:8%; left: 80%; font-size: 0.7em; color: darkgray;">想要一刀99999?</div>
				<a href="#" style="text-decoration: none; position: absolute; top:8%; left: 90%; font-size: 0.7em; color: royalblue;">就来贪玩蓝月 ></a>
				<div id="usernameMes" class="spanColor" style="position: absolute; top:21%; left: 75%;"></div>
				<div id="passwordMes" class="spanColor" style="position: absolute; top:31%; left: 75%;"></div>
				<div id="passwordMes2" class="spanColor" style="position: absolute; top:41%; left: 75%;"></div>
				<div id="birthdayMes" class="spanColor" style="position: absolute; top:51%; left: 75%;"></div>
			</div>
		</div>
		<div id="div2">
			<div style="border-bottom: 1px solid gainsboro; width: 70%; padding-top: 2%; margin: 0 auto;"></div>
			<div id="div2_2">
				<a href="#">关于我们</a>
				<a href="#">法律声明及隐私权政策</a>
				<a href="#">廉正举报</a>
				<a href="#">联系我们</a>
				<a href="#">加入妙妙屋</a>
			</div>
		</div>
	</body>
</html>

 

           


EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00