一、页面样式
使用jQuery实现登录与注册页面滑动显示,登录与修改密码页面淡入淡出显示,简单的表单验证,注册数据采用localStorage本地储存。
二、实现功能
-
jQuery实现页面切换滑动动画
-
三大模块:登录模块、注册模块、修改密码模块
登录:
注册:
修改密码:
-
注册模块用户username与password采用localStorage本地浏览器储存
4.基本的表单输入用户名密码的格式与字符串类型、字符个数验证,采用正则表达式来验证
// 数字与字母的正则表达式
let zg = /^[0-9a-zA-Z]*$/;
// 汉字正则表达式
let reg = /^[^\u4e00-\u9fa5]+$/;
三、不足之处
- js代码有点杂乱,不过相应的注释都有,对应的模块都有,只是需要封装一下重复代码。
附录:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<script src="./jQuery.min.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="loginregistBox">
<div class="loginbox">
<div class="login">
<h2>Sign In</h2>
<form action="javascript:;">
<div class="logintext">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</div>
<input type="submit" class="submit" value="SIGN IN">
<a href="javascript:;" class="forgotpwd">forgot Password</a>
<span></span>
</form>
</div>
<div class="repwd">
<h2>Modify Pwd</h2>
<form action="javascript:;">
<div class="repwdtext">
<input type="text" placeholder="username" maxlength="12" minlength="5">
<div class="repwdtext_usr">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
<input type="password" placeholder="Newpassword(6-16chars)">
<div class="repwdtext_pwd">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
<input type="password" placeholder="reNewpassword">
<div class="repwdtext_repwd">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
</div>
<input type="submit" class="submit" value="SUBMIT">
</form>
</div>
<div class="regist">
<h2>Sign Up</h2>
<form action="javascript:;">
<div class="registtext">
<input type="text" placeholder="username(5-12letters or nums)">
<div class="registtext_usr">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
<input type="password" placeholder="password(6-16chars)">
<div class="registtext_pwd">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
<input type="password" placeholder="repassword">
<div class="registtext_repwd">
<i><img src="./img/icon/ture.png" alt=""></i>
<i><img src="./img/icon/false.png" alt=""></i>
</div>
</div>
<input type="submit" class="submit" value="SIGN UP">
</form>
</div>
</div>
<div class="switch">
<img src="./img/switch1.jpg" alt="" class="switchright">
<img src="./img/switch2.jpg" alt="" class="switchleft">
<input type="button" value="SIGN UP">
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0 auto;
padding: 0 auto;
}
body {
background-image: linear-gradient(-90deg, #747df9 0%, #b93fec 100%);
}
ul li {
list-style: none;
}
.loginregistBox {
position: relative;
left: 0;
top: 256px;
width: 750px;
height: 450px;
background-color: white;
box-shadow: 4px 5px 4px 0 rgb(0 0 0 / 5%);
border-radius: 10px;
overflow: hidden;
}
.loginbox {
width: 500px;
height: 450px;
/* border: 1px solid red; */
position: absolute;
}
.login {
text-align: center;
width: 350px;
height: 400px;
/* border: 1px solid pink; */
margin-top: 50PX;
position: relative;
}
.repwd {
text-align: center;
width: 490px;
height: 400px;
/* border: 1px solid pink; */
margin-top: 50PX;
position: relative;
display: none;
}
.regist {
text-align: center;
width: 490px;
height: 400px;
/* border: 1px solid pink; */
margin-top: 50PX;
position: relative;
display: none;
}
.login h2,
.repwd h2,
.regist h2 {
margin-top: 50px;
}
.login .logintext input,
.repwd .repwdtext input,
.regist .registtext input {
outline: none;
border-color: transparent;
border: none;
border-bottom: 2px solid #dde2de;
width: 240px;
height: 30px;
margin-top: 45px;
text-align: center;
font-size: 16px;
}
.login .submit,
.repwd .submit,
.regist .submit {
margin-top: 50px;
width: 240px;
height: 32px;
border-radius: 20px;
background-image: linear-gradient(-90deg, #747df9 0%, #b93fec 100%);
border: none;
color: white;
cursor: pointer;
}
.login .forgotpwd {
/* clear: left; */
/* text-decoration: none; */
font-size: 12px;
position: absolute;
left: 130px;
bottom: 80px;
color: #757575;
}
.login span {
font-size: 16px;
position: absolute;
left: 140px;
bottom: 50px;
color: red;
}
.repwd .repwdtext i,
.regist .registtext i {
margin-left: -24px;
display: none;
/* margin-top: 8px; */
color: red;
font-size: 14px;
}
.repwd .repwdtext i img,
.regist .registtext i img {
width: 20px;
height: 20px;
/* display: none; */
}
.repwd .repwdtext .repwdtext_usr,
.repwdtext_pwd,
.repwdtext_repwd {
position: absolute;
right: 20px;
margin-top: -25px;
width: 150px;
/* top: 0; */
line-height: 20px;
}
.regist .registtext .registtext_usr,
.registtext_pwd,
.registtext_repwd {
position: absolute;
right: 20px;
margin-top: -25px;
width: 150px;
/* top: 0; */
/* line-height: 20px; */
}
.repwd .repwdtext .message {
color: red;
font-size: 14px;
}
/* swict */
.switch {
width: 250px;
height: 450px;
position: absolute;
right: 0;
top: 0;
}
.switch .switchright {
width: 250px;
height: 450px;
}
.switch .switchleft {
width: 250px;
height: 450px;
display: none;
}
.switch input {
color: white;
background-color: transparent;
width: 80px;
height: 32px;
border-radius: 20px;
border: 1.5px solid white;
position: absolute;
right: 80px;
bottom: 112px;
cursor: pointer;
}
.switch input:hover {
background-color: rgb(255, 255, 255, 0.3);
}
JS:
$(function() {
//动画 登录页面切换修改密码页面
$(".forgotpwd").click(function() {
$(".login .logintext input").val("");
$(".login span").text("");
$(".login").fadeOut();
$(".repwd").delay("slow").fadeIn();
});
//验证并修改本地local密码
$(".repwd .submit").click(function() {
let password = $(".repwdtext input").eq(1).val();
let repassword = $(".repwdtext input").eq(2).val();
if (password == repassword) {
if ($(".repwdtext i").eq(0).css("display") == "inline" && $(".repwdtext i").eq(2).css("display") == "inline" && $(".repwdtext i").eq(4).css("display") == "inline") {
// 修改密码
localStorage.setItem("password", $(".repwdtext input").eq(1).val());
// 动画
$(".repwd .repwdtext input").val("");
$(".repwdtext").find("i").hide();
$(".repwd").fadeOut();
$(".login").delay("slow").fadeIn();
}
}
});
// 切换动画 swicth按钮切换
$(".switch input").click(function() {
if ($(".switch").css("right") == "0px") {
// 登录框val置空 repwd标签隐藏
$(".login .logintext input").val("");
$(".login span").text("");
$(".registtext").find("i").hide();
$(".repwdtext input").val("");
$(".repwdtext").find("i").hide();
// 切换标签滑动
$(".switch").animate({
right: 500
});
// 登录框滑动
$(".loginbox").animate({
left: 250
});
$(".switch .switchright").hide().siblings().show();
// login repwd都需要淡出
// repwd验证标签重新隐藏
$(".login").fadeOut("fast");
$(".repwd").fadeOut("fast");
$(".regist").delay(200).fadeIn();
$(this).val("SIGN IN");
} else {
$(".regist .registtext input").val("");
$(".switch").animate({
right: 0
});
$(".loginbox").animate({
left: 0
});
$(".switch .switchleft").hide().siblings().show();
$(".regist").fadeOut("fast");
$(".login").delay(200).fadeIn();
$(this).val("SIGN UP")
}
})
// 注册提交
$(".regist .submit").click(function() {
// 注册账号保存本地存储 local
if ($(".registtext i").eq(0).css("display") == "inline" && $(".registtext i").eq(2).css("display") == "inline" && $(".registtext i").eq(4).css("display") == "inline") {
localStorage.setItem("username", $(".registtext input").eq(0).val());
localStorage.setItem("password", $(".registtext input").eq(1).val());
$(".regist .registtext input").val("");
// 动画
$(".registtext").find("i").hide();
$(".switch").animate({
right: 0
});
$(".loginbox").animate({
left: 0
});
$(".switch .switchleft").hide().siblings().show();
$(".regist").fadeOut("fast");
$(".login").delay(200).fadeIn();
$(this).val("SIGN UP")
}
})
//表单验证 修改密码 修改密码框
$(".repwdtext input").focusout(function() {
let username = $(".repwdtext input").eq(0).val();
let password = $(".repwdtext input").eq(1).val();
let localusername = localStorage.getItem("username");
let repassword = $(".repwdtext input").eq(2).val();
let reg = /^[^\u4e00-\u9fa5]+$/;
if (username != "") {
if (username == localusername) {
// console.log($(".repwdtext_usr span").eq(0))
$(".repwdtext_usr i").eq(0).show().siblings().hide();
} else {
$(".repwdtext_usr i").eq(1).show().siblings().hide();
}
}
if (password != "") {
if (password.length >= 6 && password.length <= 16) {
if (reg.test(password)) {
$(".repwdtext_pwd i").eq(0).show().siblings().hide();
} else {
$(".repwdtext_pwd i").eq(1).show().siblings().hide();
}
} else {
$(".repwdtext_pwd i").eq(1).show().siblings().hide();
}
}
if (repassword != "") {
if (password === repassword) {
$(".repwdtext_repwd i").eq(0).show().siblings().hide();
} else {
$(".repwdtext_repwd i").eq(1).show().siblings().hide();
}
}
})
// 注册框
$(".registtext input").focusout(function() {
let username = $(".registtext input").eq(0).val();
let password = $(".registtext input").eq(1).val();
let repassword = $(".registtext input").eq(2).val();
// 数字与字母的正则表达式
let zg = /^[0-9a-zA-Z]*$/;
// 汉字正则表达式
let reg = /^[^\u4e00-\u9fa5]+$/;
// 验证用户名
if (username != "") {
if (username.length >= 5 && username.length <= 12) {
if (zg.test(username)) {
$(".registtext_usr i").eq(0).show().siblings().hide();
} else {
$(".registtext_usr i").eq(1).show().siblings().hide();
}
} else {
$(".registtext_usr i").eq(1).show().siblings().hide();
}
}
// 验证密码
if (password != "") {
if (password.length >= 6 && password.length <= 16) {
if (reg.test(password)) {
$(".registtext_pwd i").eq(0).show().siblings().hide();
} else {
$(".registtext_pwd i").eq(1).show().siblings().hide();
}
} else {
$(".registtext_pwd i").eq(1).show().siblings().hide();
}
}
//
if (repassword != "") {
if (password === repassword) {
$(".registtext_repwd i").eq(0).show().siblings().hide();
} else {
$(".registtext_repwd i").eq(1).show().siblings().hide();
}
}
})
// 登录框验证
$(".login .submit").click(function() {
let localusername = localStorage.getItem("username");
let localpassword = localStorage.getItem("password");
let username = $(".logintext input").eq(0).val();
let password = $(".logintext input").eq(1).val();
if (username == localusername) {
if (password == localpassword) {
alert("登录成功!!!")
$(".login span").text("登录成功");
} else {
$(".login span").text("密码错误");
}
} else {
$(".login span").text("用户名错误");
}
})
})