Implement a simple login page
Designed a login page, which feels pretty good
Realization effect
The design is still pretty good, isn't it
Analyze required functions
- One login page one registration page
- Flip effect
- The regular judgment after input will prompt the user with information
- Flip all the information of the page to be cleared
- After clicking Register, the user will be informed whether the registration is successful
- Click login to verify whether it is successful
Implementation process
Flip effect
Click new user registration, go to the registration page, click the existing account, and go to the login page
The login page and the registration page are stacked together by positioning, then the registration page is rotated 180 degrees, and then the two pages are wrapped in an outer box. In this way, the alternating effect of the two pages can be realized by rotating the outer box
This part needs to cooperate with css to make the rotation effect more three-dimensional
register.onclick = function () {
loginBox.style.transform = 'translateX(-50%) rotateY(180deg) ';//Rotate 180deg, and the previous movement value is from the css part, so keep it
login.style.display = 'none';//The login page disappears
container.style.display = 'block';//The registration page appears
clear();//This function is very simple, that is, traverse the input box of the page and the prompt information, and clear the value inside
}
before.onclick = function () {
loginBox.style.transform = 'translateX(-50%) rotate(360deg) ';
container.style.display = 'none';
login.style.display = 'block';
clear();
}
Regular judgment
There are five input boxes in the registration page. The password and telephone number need regular judgment, and writing the code separately will be too redundant. Therefore, it is still realized through the array index and put the regular expression into the array. Because the first two input boxes do not need regular judgment, when I > 2, make regular judgment again, so it can be solved through a for loop, Another content to be judged in the page is whether the password entered twice is consistent with the previous input, that is, when i==3
In fact, this regular judgment is not difficult, but there are many points to pay attention to. When you do it, you should pay attention not to get the corresponding relationship between the text box and regular judgment wrong
I have a question here. I hope the boss can solve it. I want to use a regular expression to express anything, that is, how to achieve if I simply want to occupy an array bit and don't let it report an error?
let register_input = container.querySelectorAll('input'); //All the registration information is obtained from all the text boxes of the registration page
/* regular expression */
let telReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//Regular expression of telephone number
let psdReg = /\w{6,18}$/;//Set the password to 6, 18 digits, which can only contain letters, numbers and underscores
let reg = [psdReg, psdReg, telReg];//Put the regular expression into the array, which can be realized by traversal
for (let i = 0; i < register_input.length; i++) {
register_input[i].onblur = function () {
if (i >= 2) {
if (!reg[i - 2].test(register_input[i].value)) {// If it does not conform to the regular expression, a prompt message will pop up
this.nextElementSibling.style.display = 'block';
} else {
this.nextElementSibling.style.display = 'none';
}
}
if (i == 3) {
if (this.value == register_input[2].value) {// If the passwords entered twice are inconsistent, a prompt message will pop up
this.nextElementSibling.style.display = 'none';
} else {
this.nextElementSibling.style.display = 'block';
}
}
}
}
ajax implementation registration
jquery is used here. It's OK to use the Ajax function encapsulated by yourself. It's lazy. I'd better use ajax. This interface is given by the senior brother in the background. I don't know anything about the interface, so the interface address is not released
After clicking the register button, we need to judge for the last time whether the information in the input box conforms to our regular expression and whether the two passwords are the same. If they are met, we can call ajax to send the registration request to the server, otherwise the data in the background may be abnormal. Here I introduce a Boolean value as a flag, When all the input contents are correct, the request can be sent. After the registration is successful, a prompt of successful registration will be given to the user and the page will be cleared
register_btn.onclick = () => {
let judge = true;
for (let i = 2; i < register_input.length; i++) {
if (!reg[i - 2].test(register_input[i].value)) {
judge = false;
}
}
if (register_input[2].value != register_input[3].value) {
judge = false;
register_input[3].nextElementSibling.style.display = 'block';
} else {
register_input[3].nextElementSibling.style.display = 'none';
}//Judgment input information
if (judge) {
$.ajax({
type: 'POST',
url: 'http://www.XXXXXXXX',
data: {
username: register_input[0].value,
password: register_input[2].value,
name: register_input[1].value,
phone: register_input[4].value
},
success: res => {
if (res.code == 200) {
console.log(res);
register_true.style.display = 'block';//prompt box
setTimeout(() => {
register_true.style.display = 'none';//The prompt disappears after 2s
}, 2000)
clear();//Clear the input box
} else {
alert('The account already exists. Please change the account and try again');
}
}
})
} else {
alert('Please follow the prompts to modify your personal information');
}
}
Login operation
The login operation is really very simple. Click login to judge the status code returned by the server. If it is 200, it will jump to the page and enter the website. If it fails, an error message will pop up
login_btn.onclick = function () {
$.ajax({
type: 'POST',
url: ' http://www.XXXXXX',
data: {
username: login_input[0].value,
password: login_input[1].value
},
success: function (res) {
console.log(res);
if (res.code == 200) {
loginBox.style.display = 'none';//If the login is successful, the login page disappears
go(res);//This function is the jump function after successful login
} else {
err.style.display = 'block';
setTimeout(() => {
err.style.display = 'none';
}, 2000)
}
},
error: function (er) {
console.log('error');
}
})
}
The above is the analysis of realizing login operation
HTML code
<!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>Document</title>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/button.css">
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="loginBox">
<div class="container">
<div class="title">Small A super VIP Registration page</div>
<div class="information">
<input type="text" placeholder="account number" id="myname">
<label></label>
</div>
<div class="information">
<input type="name" placeholder="full name">
<label>Please enter the correct name</label>
</div>
<div class="information">
<input type="password" placeholder="password" id="psd_input">
<label class="label_psd">The length is 6~18 Between, only letters, numbers and underscores can be included</label>
</div>
<div class="information">
<input type="password" placeholder="Enter the password again">
<label>Inconsistent passwords</label>
</div>
<div class="information">
<input type="tel" placeholder="cell-phone number">
<label>Please enter the correct mobile phone number</label>
</div>
<button class="btn" id="newBtn">register</button>
<br>
<button class="loginBtn" id="before">If you have an account, return to the login interface</button>
<span class="true err">Registration succeeded, please login</span>
</div>
<div class="login">
<div class="title">Small A super VIP Login page</div>
<div class="information">
<input type="text" placeholder="account number" id="login_name">
</div>
<div class="information">
<input type="password" placeholder="password" id="login_psd">
</div>
<button class="btn" id="login_btn">Sign in</button>
<br>
<button class="loginBtn" id="register">New member registration</button>
<span class="err">The user name does not exist or the password is incorrect</span>
</div>
</div>
<h1 id="results">
</h1>
</body>
</html>
CSS code
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: url(../imgs/5.jpg) no-repeat;
background-size: cover;
perspective: 1000px;
}
.loginBox {
display: flow-root;
position: relative;
left: 50%;
width: 400px;
height: 370px;
margin-top: 35px;
transform: translateX(-50%);
transition: all .4s;
transform-style: preserve-3d;
}
.container,
.login {
position: absolute;
top: 0;
width: 400px;
background-color: rgba(0, 0, 0, .8);
text-align: center;
border-radius: 20px;
}
.container {
display: none;
transform: rotateY(180deg);
}
.title {
color: white;
font-size: 24px;
margin: 30px 0px;
user-select: none;
}
button {
text-align: center;
}
input {
width: 200px;
height: 26px;
margin: 5px;
outline: none;
border: none;
color: white;
border-bottom: 1px solid #fff;
background-color: transparent;
text-indent: 1em;
}
input::placeholder {
user-select: none;
color: white;
opacity: .5;
}
.btn {
margin: 10px 0px;
}
.loginBox .container div {
position: relative;
}
label {
display: none;
position: absolute;
top: 50%;
right: 5px;
width: 33%;
color: white;
font-size: 12px;
background-color: rgba(0, 0, 0, .8);
padding: 0px 5px;
border-radius: 5px;
transform-origin: right;
transform: translateY(-50%) scale(.7);
}
.login .err,
.container .err {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.7);
font-size: 12px;
color: white;
padding: 4px;
background-color: rgba(0, 0, 0, .8);
border-radius: 10px;
z-index: 1;
}
#results {
text-align: center;
color: white;
margin-top: 100px;
user-select: none;
}
The style of the button has been written in another blog, this one: Colorful button
js code will not be posted. If you need a complete code, you can send a private letter or leave a message