简易登录注册界面及正则判断（jQuery）

其他 2018-06-21 05:14:31 阅读次数: 2

登录注册是我们日常项目常见的代码片段，以下粗略的代码供小白参考。

一、代码目录

index.html---登录注册页面

index.js---登录与注册界面切换

login.js---登录界面逻辑

register.js---注册界面逻辑

login.css---登录注册界面样式

二、代码分析

1、index.html---登录注册界面

<!Doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" type="text/css" href="css/login.css" />

	</head>

	<body>
		<!--登录注册二选一弹出框-->
		<div id="loginOrRegister">
			<!--标题-->
			<div class="title">
				<span class="login colorRed" onclick="goLogin()">登录</span>
				<span class="register" onclick="goRegister()">注册</span>
			</div>
			<!--具体信息-->
			<div id="formInformation">
				<!--登录界面-->
				<form action="www.baidu.com" method="post" class="loginForm">
					<ul class="box box1">
						<li>
							<label for="account">账号</label>
							<input type="text" placeholder="请输入您的账号（即手机号）" class="account" id="account" />
							<span class="error"></span>
						</li>
						<li>
							<label for="password">密码</label>
							<input type="password" class="password" id="password" placeholder="请输入密码" />
							<span class="error"></span>
						</li>
						<li>
							<label for="authCode">验证码</label>
							<input type="text" class="sradd photokey" id="authCode" placeholder="请输入收到的验证码" />
							<span class="add authCode"></span>
							<span class="error"></span>
						</li>
					</ul>
					<div class="submit">
						<input type="submit" value="立即登录" />
					</div>
				</form>
				<!--注册界面-->
				<form action="www.baidu.com" method="post" class="registerForm">
					<ul class="box box2">
						<li>
							<label for="phone">手机</label>
							<input type="text" placeholder="请输入您的手机号码" id="phone" maxlength="11" />
							<span class="error"></span>
						</li>
						<li>
							<label for="authCode2">验证码</label>
							<input type="text" class="sradd phonekey" id="authCode2" placeholder="请输入收到的验证码" />
							<span class="add sendaAuthCode">发送验证码</span>
							<span class="error"></span>
						</li>
						<li>
							<label for="password2">密码</label>
							<input type="password" class="password" id="password2" placeholder="请输入密码" />
							<span class="error"></span>
						</li>
						<li>
							<label for="password3">确认密码</label>
							<input type="password" class="email" id="password3" placeholder="请再次输入密码" />
							<span class="error"></span>
						</li>
					</ul>
					<div class="submit">
						<input type="submit" value="立即注册" />
					</div>
				</form>
			</div>
		</div>
	</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/login.js" type="text/javascript" charset="utf-8"></script>
<script src="js/register.js" type="text/javascript" charset="utf-8"></script>

2、index.js---登录与注册界面切换

// 切换登录
function goLogin() {
	$(".loginForm").css("display", "block");
	$(".registerForm").css("display", "none");
	$(".login").addClass("colorRed");
	$(".register").removeClass("colorRed");
}
// 切换注册
function goRegister() {
	$(".registerForm").css("display", "block");
	$(".loginForm").css("display", "none");
	$(".register").addClass("colorRed");
	$(".login").removeClass("colorRed");
}

3、login.js---登录界面逻辑

$(function() {
	// 登录界面生成验证码
	(function create_code() {
		function shuffle() {
			var arr = ['1', 'r', 'Q', '4', 'S', '6', 'w', 'u', 'D', 'I', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', '2', 's', 't', '8', 'v', '7', 'x', 'y', 'z', 'A', 'B', 'C', '9', 'E', 'F', 'G', 'H', '0', 'J', 'K', 'L', 'M', 'N', 'O', 'P', '3', 'R', '5', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
			return arr.sort(function() {
				return(Math.random() - .5);
			});
		};
		shuffle();

		function showAuthCode() {
			var ar1 = '';
			var code = shuffle();
			for(var i = 0; i < 6; i++) {
				ar1 += code[i];
			};
			$(".box1 .authCode").text(ar1);
		};
		showAuthCode();
		$(".box1 .authCode").click(function() {
			showAuthCode();
		});
	})();
	//登录界面账户输入框失去焦点
	(function login_validate() {
		$(".box1 .account").blur(function() {
			accountReg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if($(this).val() == "" || $(this).val() == "请输入您的账号（即手机号）") {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("账号不能为空！");
				console.log("账号不能为空");
				return;
			} else if(!accountReg.test($(".box1 .account").val())) {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("账号不存在!");
			} else {
				$(this).addClass("correctInput");
				$(this).removeClass("errorInput");
				$(this).next().empty();
			}
		});
		// 登录界面密码输入框失去焦点
		$(".box1 .password").blur(function() {
			reg = /^[A-Za-z0-9]{6}$/
			if($(this).val() == "") {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("密码不能为空！");
			} else if(!reg.test($(".password").val())) {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("请输入6位包含数字或字母的密码！");
			} else {
				$(this).addClass("correctInput");
				$(this).removeClass("errorInput");
				$(this).next().empty();
			}
		});

		// 验证码输入框失去焦点
		$(".box1 .photokey").blur(function() {
			var code1 = $('.box1 .photokey').val().toLowerCase();
			var code2 = $(".box1 .authCode").text().toLowerCase();
			if($('.box1 .photokey').val() == "") {
				$('.box1 .photokey').addClass("errorInput");
				$(this).next().next().html("验证码不能为空！");
				console.log("11111")
				return;
			} else if(code1 != code2) {
				$(this).addClass("errorInput");
				$(this).next().next().css("display", "block").html("验证码输入错误！");
				console.log("22222")
			} else {
				$(this).removeClass("errorInput");
				$(this).next().next().empty();
				$(this).addClass("correctInput");
			}
		})
	})();
})

4、register.js---注册界面逻辑

$(function() {
	// 注册页面的提示文字
	(function register() {
		// 注册界面手机号栏失去焦点
		$(".box2 #phone").blur(function() {
			phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
			if($(this).val() == "") {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("手机号码不能为空!");
				return;
			} else if(!phoneReg.test($(this).val())) {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("请输入正确的手机号码!");
			} else {
				$(this).addClass("correctInput");
				$(this).next().empty();
			}
		});

		// 注册界面验证码栏失去焦点
		$(".box2 .phonekey").blur(function() {
			reg = /^[A-Za-z0-9]{6}$/;
			if($(this).val() == "") {
				$(this).addClass("errorInput");
				$(this).next().next().css("display", "block").html("验证码不能为空！");
				return;
			} else if(!reg.test($(this).val())) {
				$(this).addClass("errorInput");
				$(this).next().next().css("display", "block").html("验证码输入有误！");
			} else {
				$(this).next().next().empty();
				$(this).addClass("correctInput");
			}
		});

		// 注册界面密码栏失去焦点
		$(".box2 .password").blur(function() {
			reg = /^[A-Za-z0-9]{6}$/
			if(reg.test($(this).val())==""){
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("密码不能为空！");
				console.log("登录界面的密码是不是为空了？？？")
			}else if(!reg.test($(this).val())) {
				$(this).addClass("errorInput");
				$(this).next().css("display", "block").html("请输入6位包含数字或字母的密码！");
			} else {
				$(this).removeClass("errorInput");
				$(this).next().empty();
				$(this).addClass("correctInput");
			}
		});
		// 注册界面确认密码失去焦点
		$(".box2 .email").blur(function() {
			var pwd1 = $('.box2 .password').val();
			var pwd2 = $(this).val();
			if(pwd1 == "") {
				$(this).removeClass("errorInput");
				$(this).next().html("确认密码不能为空！");
				$(this).addClass("errorInput");
				return;
			} else if(pwd1 != pwd2) {
				$(this).addClass("errorInput");
				$(this).removeClass("correctInput");
				$(this).next().css("display", "block").html("两次密码输入不一致！");
			} else {
				$(this).removeClass("errorInput");
				$(this).addClass("correctInput");
				$(this).next().empty();
			}
		});
	})();
});

5、login.css---登录注册页面样式

* {
	margin: 0;
	padding: 0;
	font-family: "黑体";
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}

ul,li {
	list-style: none;
}
input {
	background-color: #fff;
	outline: none;
	color:#999;
}
.colorRed{
	color: red !important;
}
/*登录注册二选一布局*/
#loginOrRegister {
	position: fixed;
	left: 30%;
	top: 30%;
	background-color: #447391;
	width: 500px;
	margin-left: -250px;
	margin-top: -150px;
	border-radius: 10px;
	text-align: center;
}
/*登录注册标题*/
.title {
	height: 45px;
	line-height: 45px;	
}
.title .login, .title .register{
	padding: 10px 0;
	color: #fff;
	font-size: 25px;
	cursor: pointer;	
}
/*.title .register{
	border-left: 1px solid black;
}*/
.title span:hover{
	color: deeppink;
}
/*登录注册具体表单信息*/
form {
	padding: 20px 0px;
}
#formInformation {
    background-color: #f2f2f2;
    margin: 0 0px 10px 0px;
}
.registerForm{
	display: none;
}

/*提交样式*/
.submit input {
	display: inline-block;
	width: 300px;
	background-color: rgb(255, 109, 11);
	color: rgb(255, 255, 255);
	font-size: 20px;
	height: 40px;
	line-height: 40px;
	outline: none;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-left: 32px;
}
.submit input:hover{
	background-color: rgb(220, 109, 11);
}
.box {
	padding-left: 30px;
}

.box li {
	line-height: 44px;
	width: 100%;
	overflow: hidden;
}

.box li label {
	width: 68px;
	height: 50px;
	float: left;
	line-height: 50px;
	text-align: right;
	padding-right: 20px;
}

.box li input{
	padding: 6px 0;
	font-size: 16px;
	width: 296px;
	height: 28px;
	line-height: 28px;
	border: 1px solid #dddddd;
	text-indent: 0.5em;
	float: left;
	border-radius: 5px;
}

/*验证码*/

.box li .sradd {
	width: 148px;
	text-indent: 4px;
	font-size: 14px;
}

/*登录界面验证码*/
.authCode {
	background: #ff7200;
	text-align: center;
	line-height: 42px;
	color: #fff;
	border-radius: 5px;
	font-size: 20px;
	letter-spacing: 3px;
	width: 128px;
	height: 42px;
	float: left;
	display: inline;
	cursor: pointer;
	margin-left: 20px;
}

/*注册界面发送验证法*/
.sendaAuthCode{
    background: #ff7200;
    text-align: center;
    line-height: 42px;
    color: #fff;
    border-radius: 5px;
    width: 128px;
    height: 42px;
    float: left;
    display: inline;
    cursor: pointer;
    margin-left: 20px;
}

.error {
	clear: both;
	display: block;
	color: red;
	padding-left: 90px;
	padding-bottom: 5px;
	height: 20px;
	float: left;
	font-size: 12px;
	line-height: 20px;
}

.errorInput {
	border: 1px solid red !important;
}

.correctInput {
	border: 1px solid green !important;
}

三、效果图





猜你喜欢

转载自blog.csdn.net/qq_41115965/article/details/80467689
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022