简单的注册页面

一个简单的注册页面,还未连接数据库,当打开程序时,将会随机产生一组10位数的账号(不能改动),
如果点击注册,尚框内尚还有未填,或者数据错误提示错误,如果未发生错误将会跳转到新页面。
实现代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				background: url(img/beijing.jpg);
				background-position: top center;
				background-repeat: no-repeat;
			}
			
			.div {
				padding-top: 50px;
				width: 100%;
				height: 500px;
			}
			
			.box {
				margin: 0 auto;
				width: 581px;
				height: 500px;
				padding-left: 123.5px;
				background: rgba(255, 255, 255, 0);
			}
			
			.label {
				width: 76.5px;
				height: 21px;
				margin-top: 3px;
				font-size: 19px;
				color: #81868a;
				display: inline-block;
				text-align: justify;
				text-align-last: justify;
				background: rgba(255, 255, 255, 0);
			}
			/*.box-one {
				line-height: 34px;
			
			}*/
			
			.box-two {
				position: relative;
				padding-left: 10px;
				padding-top: 8px;
				width: 322px;
				height: 43px;
				border: 1px solid #4492dc;
				border-radius: 44px;
				margin-bottom: 20px;
				float: left;
				background: rgba(255, 255, 255, 0);
			}
			
			#useid {
				/*background: #fff;*/
				text-align: center;
				background: rgba(255, 255, 255, 0);
			}
			
			.input {
				width: 306px;
				height: 34px;
				font-size: 19px;
				/*margin-left:5px;*/
				border: none;
				background: rgba(255, 255, 255, 0);
			}
			
			#btn {
				/*border:#4492dc;*/
				width: 90%;
				height: 30px;
				font-size: 19px;
				/*background: #4492dc;*/
				text-align: center;
				color: #FFFFFF;
				border: none;
				background: rgba(255, 255, 255, 0);
			}
			/*.btn_one{
				background: #4492dc;
			}*/
			
			span {
				margin-top: 9px;
				font-size: 19px;
				float: left;
				color: red;
				background: rgba(255, 255, 255, 0);
			}
			
			.box-two #boy {
				position: absolute;
				top: 19px;
				left: 126px;
			}
			
			.box-two #girl {
				position: absolute;
				top: 19px;
				left: 201px;
			}
			
			label:nth-of-type(2),
			label:nth-of-type(3) {
				margin-left: 50px;
				font-size: 19px;
				background: rgba(255, 255, 255, 0);
			}
		</style>
	</head>

	<body>
		<div class="div">

			<div class="box">
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">账号</label>-->
						<input type="text" class="input one" name="useid" id="useid" value="" disabled="disabled" />
					</div>

				</div>
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">用户名</label>-->
						<input type="text" class="input" name="usename" id="usename" value="" placeholder="用户名" />
					</div>
					<span id="usename_a"></span>
				</div>
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">密码</label>-->
						<input type="password" class="input" name="password" id="password" value="" placeholder="密码" />
					</div>
					<span id="password_a"></span>
				</div>
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">确认密码</label>-->
						<input type="password" class="input" name="password1" id="password1" value="" placeholder="确认密码" />

					</div>
					<span id="password1_a"></span>
				</div>
				<div class="box-one">
					<div class="box-two">
						<label class="label">性别</label>
						<input type="radio" name="sex" id="boy" value="" /><label for="boy">男</label >
					<input type="radio"  name="sex" id="girl" value="" /><label for="girl">女</label >
					
					</div>
					<span id="sex_a"></span>	
				</div>
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">邮箱</label>-->
						<input type="text" class="input" name="postbox" id="postbox" value="" placeholder="邮箱" />

					</div>
					<span id="postbox_a"></span>
				</div>
				<div class="box-one">
					<div class="box-two">
						<!--<label class="label">手机号码</label>-->
						<!--<select name="" class="xiala">
			<option value="">中国大陆  +86</option>
			<option value="">中国香港特别行政区 +852</option>
				<option value="">中国澳门特别行政区 +853</option>
			<option value="+86">中国台湾地区 +886</option>
		</select>-->
						<input type="text" class="input" name="phone" id="phone" value="" placeholder="电话号码" />
					</div>

					<span id="phone_a"></span>
				</div>
				<div class="box-one">
					<div class="box-two btn_one ">

						<input type="button" name="btn" id="btn" value="注册" />
					</div>

				</div>
			</div>
			<script type="text/javascript">
				var num = "";
				for(var i = 0; i < 10; i++) {
					num += Math.floor(Math.random() * 10); /*随机产生10位数*/
				}
				var useid = document.getElementById("useid").value = num;
				btn.onclick = function() {
					var num1 = 1;
					//					获取值
					var usename = document.getElementById("usename").value;
					var pas = document.getElementById("password").value;
					var pas1 = document.getElementById("password1").value;
					var boy = document.getElementById("boy");
					var girl = document.getElementById("girl");
					var postbox = document.getElementById("postbox").value;
					var phone = document.getElementById("phone").value;

					var usename_a = document.getElementById("usename_a");
					var pas_a = document.getElementById("password_a");
					var pas1_a = document.getElementById("password1_a");
					var aa = document.getElementById("password");
					var sex_a = document.getElementById("sex_a")
					var postbox_a = document.getElementById("postbox_a");
					var phone_a = document.getElementById("phone_a");

					//						console.log(usename.length);
					if(usename.length == "0") {

						usename_a.innerText = "请输入用户名";
						num1 = 0;

					} else {
						usename_a.innerText = " ";
					}

					if(pas.length == "0") {

						pas_a.innerText = "请输入密码";
						num1 = 0;
					} else {
						pas_a.innerText = " ";
					}
					//					if(pas1.length == "0") {
					//						pas1_a.innerText = "请输入确认密码";
					//					}else{
					//						pas1_a.innerText=" ";
					//					}
					if(pas != pas1) {
						pas1_a.innerText = "两次密码不同,请重新输入";
						num1 = 0;
					} else {
						pas1_a.innerText = " ";
					}

					if(!boy.checked && !girl.checked) {
						sex_a.innerText = "请选择性别";
						num1 = 0;
					} else {
						sex_a.innerText = " ";
					}

					if(postbox.includes("@") != true) {
						postbox_a.innerText = "邮箱格式不正确,请重新输入";
						num1 = 0;
					} else {
						postbox_a.innerText = " ";
					}
					if(postbox.length == "0") {
						postbox_a.innerText = "请输邮箱账号";
						num1 = 0;
					}

					if(phone.length == "0") {
						phone_a.innerText = "请输入手机号码";
						num1 = 0;
					} else {
						phone_a.innerText = " ";
					}
					if(num1 == 1) {
					//	  window.open("https://blog.csdn.net/weixin_45165848");  /* 打开个新窗口*/
					   window.location.href="https://blog.csdn.net/weixin_45165848";   /*在原窗口中打开*/
				//alert("注册成功");
					}

//					console.log(num1);

				}
			</script>
		</div>
	</body>

</html>

运行结果
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页