sequence
Use native js to implement form authentication and login, so that everyone will better understand the code and use it easily. The blog that reproduced the code has left a follow, so I will continue
Send more cool forms to log in, for you to use, and it is more practical.
Author: https://home.cnblogs.com/u/yangslin/
Welcome to each other, give newcomers a little confidence
1: Implementation diagram
1. Landing page:
2. Registration page
Two: login code and registration code
1. The login.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>log-in</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<header>
<div class="header-line"></div>
</header>
<div class="content">
<img class="content-logo" src="img/hello.png" alt="logo">
<h1 class="content-title">登录</h1>
<div class="content-form">
<form method="post" action="" onsubmit="return submitTest()">
<div id="change_margin_1"> <p id="remind_1"></p><!- - When the input value is empty, a reminder will pop up --></div>
<input class="user" type="text" name="user" placeholder="Please enter username" onblur="oBlur_1()" onfocus="oFocus_1()">
<div id="change_margin_2">
<input class="password" type="password" name="password" placeholder="请输入密码" onblur="oBlur_2()" onfocus="oFocus_2()">
</div>
<!-- input的value为空时弹出提醒 -->
<p id="remind_2"></p>
<div id="change_margin_3">
<input class="content-form-signup" type="submit" value="登录">
</div>
</form>
</div>
<div class="content-login-description">没有账户？</div>
<div><a class="content-login-link" href="sgin.html">注册</a></div>
</div>
<script src="js/login_sgin.js"></script>
</body>
</html>
2. The sgin.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sign-up</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<header>
<div class="header-line"></div>
</header>
<div class="content">
<img class="content-logo" src="img/hello.png" alt="logo">
<h1 class="content-title">创建账户</h1>
<div class="content-form">
<form method="post" action="" onsubmit="return submitTest()">
<div id="change_margin_1"> <p id="remind_1"></p><!- - When the input value is empty, a reminder will pop up --></div>
<input class="user" type="text" name="user" placeholder="Please enter username" onblur="oBlur_1()" onfocus="oFocus_1()">
<div id="change_margin_2">
<input class="password" type="password" name="password" placeholder="请输入密码" onblur="oBlur_2()" onfocus="oFocus_2()">
</div>
<!-- input的value为空时弹出提醒 -->
<p id="remind_2"></p>
<div id="change_margin_3">
<input class="content-form-signup" type="submit" value="创建账户">
</div>
</form>
</div>
<div class="content-login-description">已经拥有账户？</div>
<div><a class="content-login-link" href="log_in.html">登录</a></div>
</div>
<script src="js/login_sgin.jss"></script>
</body>
</html>
3. The CSS3 style codes of login and sgin are as follows:
/*重置样式*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub
, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0
}
body {
font-family: "微软雅黑";
background: #f4f4f4;
}
/*header*/
.header-line {
width: 100%;
height: 4px;
background: #0dbfdd;
}
/*content*/
.content {
width: 28%;
margin: 70px auto 0;
text-align: center;
}
.content-logo {
width: 80px;
height: 80px;
}
.content-title {
margin: 10px 0 25px 0;
font-size: 2em;
color: #747474;
font-weight: normal;
}
.content-form {
width: 100%;
padding: 36px 0 20px;
border: 1px solid #dedede;
text-align: center;
background: #fff;
}
.content-form form div {
margin-bottom: 19px;
}
.content-form form .user,
.content-form form .password {
width: 77%;
height: 20px;
padding: 10px;
font-size: 1em;
border: 1px solid #cccbcb;
border-radius: 7px;
letter-spacing: 1px;
}
.content-form form input:focus {
outline: none;
-webkit-box-shadow: 0 0 5px #0dbfdd;
box-shadow: 0 0 5px #0dbfdd;
}
.content-form-signup {
width: 84%;
margin: 0 auto;
padding: 10px;
border: 1px solid #cccbcb;
border-radius: 7px;
font-size: 1em;
font-weight: bold;
color: #fff;
background: #0dbfdd;
cursor: pointer;
}
.content-form-signup:hover {
background: #0cb3d0;
}
.content-form-signup:focus {
outline: none;
border: 1px solid #0cb3d0;
}
.content-login-description {
margin-top: 25px;
line-height: 1.63636364;
color: #747474;
font-size: .91666667rem;
}
.content-login-link {
font-size: 16px;
color: #0dbfdd;
text-decoration: none;
}
/*The input box will prompt when there is no content*/
#remind_1,
#remind_2 {
width: 76%;
margin: 0 auto 2px;
text-align: left;
font-size: .2em;
color: #f00;
}
4. Login and sgin are implemented with js:
// Global variables a and b, respectively get the value of the user box and password box
var a = document.getElementsByTagName("input")[0].value;
var b = document.getElementsByTagName("input")[1]. value;
//Verify the value after the user box loses focus
function oBlur_1() {
if (!a) { //The value of the user box is empty
document.getElementById("remind_1").innerHTML = "Please enter the user name!";
document. getElementById("change_margin_1").style.marginBottom = 1 + "px";
} else { //User box value is not empty
document.getElementById("remind_1").innerHTML = "";
document.getElementById("change_margin_1" ).style.marginBottom = 19 + "px";
}
}
//Verify the value after the password box loses focus
function oBlur_2() {
if (!b) { //The value of the password box is empty
document.getElementById("remind_2").innerHTML = "Please enter the password!";
document.getElementById ("change_margin_2").style.marginBottom = 1 + "px";
document.getElementById("change_margin_3").style.marginTop = 2 + "px";
} else { //The value of the password box is not empty
document.getElementById ("remind_2").innerHTML = "";
document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
document.getElementById("change_margin_3").style.marginTop = 19 + "px";
}
}
//Hidden reminder function for user box to get focus
oFocus_1() {
document.getElementById("remind_1").innerHTML = "";
document.getElementById("change_margin_1").style.marginBottom = 19 + "px";
}
//The hidden reminder function for the password box to get the focus
oFocus_2() {
document.getElementById("remind_2").innerHTML = "";
document.getElementById("change_margin_2").style.marginBottom = 19 + "px";
document.getElementById ("change_margin_3").style.marginTop = 19 + "px";
}
//If the input box is empty, prevent the submission of the form
function submitTest() {
if (!a && !b) { //The value of the user box and the value of the password box are both empty
document.getElementById("remind_1").innerHTML = "Please enter your username!";
document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
document.getElementById("remind_2").innerHTML = "Please enter your password!";
document.getElementById( "change_margin_2").style.marginBottom = 1 + "px";
document.getElementById("change_margin_3").style.marginTop = 2 + "px";
return false; //The form will be submitted only if it returns true
} else if ( !a) { //The value of the user box is empty
document.getElementById("remind_1").innerHTML = "Please enter the user name!";
document.getElementById("change_margin_1").style.marginBottom = 1 + "px";
return false;
} else if (!b) { //The value of the password box is empty
document.getElementById("remind_2").innerHTML = "请输入密码！";
document.getElementById("change_margin_2").style.marginBottom = 1 + "px";
document.getElementById("change_margin_3").style.marginTop = 2 + "px";
return false;
}
}
Three: the logo image of the login registration
