简单的注册页面

最新推荐文章于 2024-05-19 10:54:20 发布
最新推荐文章于 2024-05-19 10:54:20 发布
阅读量1.5k 收藏 19
点赞数 3
分类专栏： java前端 文章标签： 注册页面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45165848/article/details/98473253
版权

一个简单的注册页面，还未连接数据库，当打开程序时，将会随机产生一组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>

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

一切会更好
关注
专栏目录
android 简单注册页面
wyt52077的博客
06-24 1100
Android Studio 是谷歌推出的一个Android集成开发工具，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试。实现效果为下图那么怎么实现呢以上便是简单的相册制作，按照上面步骤即可做出一个简单的相册。
蓝色简单注册页面登录页面HTML模板.zip
05-23
在这个"蓝色简单注册页面登录页面HTML模板.zip"压缩包中，我们拥有了一个适用于企业公司网站的简洁设计模板，它包括了注册和登录两个核心功能的HTML页面。下面将详细解析这个模板中的知识点。 首先，HTML...
前端 基础 综合案例 二 注册页面（ 简单版）A
最新发布
三毛与海子的博客
05-19 698
注册页面
一个HTML注册页面
11-06
一个很简单的HTML表单提交页面，还可以扩展成将其提交至jsp页面
CSS注册页面案例
weixin_30830327的博客
09-11 469
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; ...
注册页面
齐枫的博客
09-21 1210
Page Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。 object 参数说明： 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监
简易注册页面
weixin_42976232的博客
05-16 507
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form> <p>账号：<input type...
HTML简单注册页面源码.rar
04-04
在这个"HTML简单注册页面源码.rar"压缩包中，包含了一个基本的HTML注册页面的源代码。在前端开发中，这样的页面通常用于收集用户信息，如用户名、密码、电子邮件等，以便在网站上创建用户账户。 一个简单的HTML注册...
Java web实现简单注册页面
09-26
实现了用户名，电话号，邮箱，空值的检验
简单登陆注册页面
05-30
新手初学者看得懂的 登陆注册页面，注册有用正则表达式来表单验证。希望小白能从我的代码里了解学习到一些
一个很简单注册界面
10-16
提供注册各种很简单的选单，其实也没什么，一般懂代码都可以看懂，嘻嘻
简单好看的登陆注册界面
10-16
一个简单的网页登陆和界面，可以识别输入的密码邮箱等格式错误，原代码有很多的不必要代码，被我修改后更加简洁，也更适合新手。
jsp登陆注册页面（简单，适合初学者）
10-15
jsp登陆注册页面（简单，适合初学者）
简单注册页面
qinqyuan的博客
07-09 156
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>注册登录</title> <link rel="stylesheet" type="text/css" href="https://www.la.
一个注册页面
qq_35367566的博客
11-19 265
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body,input{ margin: 0; ...
简单注册界面
qq_46536449的博客
12-06 277
<html> <head><title>注册界面</title></head> <body STYLE="background-color:beige"> <form action="" method="post" enctype="multipart/form-data" name="form1"> <table width="410" border="1" align="center" bgcolor="azur
html简单注册页面代码
06-11
以下是一个简单的 HTML 注册页面的代码示例： ```html <!DOCTYPE html> 注册页面 欢迎注册 用户名: 密码: 邮箱: 电话: 注册"> ``` 这个页面包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值