基于layui實現(xiàn)登錄頁面
更新時間：2021年11月26日 17:32:20 作者：水向南
這篇文章主要為大家詳細(xì)介紹了基于layui實現(xiàn)登錄頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了layui實現(xiàn)登錄頁面的具體代碼，供大家參考，具體內(nèi)容如下
首先給看下效果圖吧！
html、js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
<script src="./js/res_js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./js/layui/css/layui.css" >
<link rel="stylesheet" href="./css/adminLogin.css" >
</head>
<body>
<div class="wrap">
<img src="images/back.jpg" class="imgStyle">
<div class="loginForm">
<form>
<div class="logoHead">
<!--<h2 style="margin-top: 15px">房產(chǎn)銷售平臺管理系統(tǒng)</h2>-->
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>用戶名:</label>
</div>
<div class="usernameDiv">
<i class="layui-icon layui-icon-username adminIcon"></i>
<input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="輸入用戶名" >
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>密碼:</label>
</div>
<div class="passwordDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="輸入密碼">
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>驗證碼:</label>
</div>
<div class="cardDiv">
<input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="輸入驗證碼">
</div>
<div class="codeDiv">
<input id="loginCode" class="layui-input codeInput" type="button">
</div>
</div>
<div class="usernameWrapDiv">
<div class="submitLabel">
<label>沒有賬號？<a href="#" id="loginRegister">點擊注冊</a></label>
</div>
<div class="submitDiv">
<input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登錄"></input>
</div>
</div>
</form>
</div>
</div>
<script src="./js/layui/layui.js" type="text/javascript"></script>
<script>
layui.use(['layer'],function () {
var layer = layui.layer;
})
$(function () {
// 頁面初始化生成驗證碼
window.onload = createCode('#loginCode');
// 驗證碼切換
$('#loginCode').click(function () {
createCode('#loginCode');
});
// 登陸事件
$('#loginBtn').click(function () {
login();
});
// 注冊事件
$('#loginRegister').click(function () {
register();
});
});
// 生成驗證碼
function createCode(codeID) {
var code = "";
// 驗證碼長度
var codeLength = 4;
// 驗證碼dom元素
var checkCode = $(codeID);
// 驗證碼隨機數(shù)
var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z'];
for (var i = 0;i < codeLength; i++){
// 隨機數(shù)索引
var index = Math.floor(Math.random()*36);
code += random[index];
}
// 將生成的隨機驗證碼賦值
checkCode.val(code);
}
// 校驗驗證碼、用戶名、密碼
function validateCode(inputID,codeID) {
var inputCode = $(inputID).val().toUpperCase();
var cardCode = $(codeID).val();
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
layer.alert("用戶名不能為空");
return false;
}
if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
layer.alert("密碼不能為空");
return false;
}
if (inputCode.length<=0){
layer.alert("驗證碼不能為空");
return false;
}
if (inputCode != cardCode){
layer.alert("請輸入正確驗證碼");
return false;
}
return true;
}
// 登錄流程
function login() {
if (!validateCode('#loginCard','#loginCode')){
//阻斷提示
}else {
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
var params = {};
params.loginUsername = loginUsername;
params.loginPassword = loginPassword;
var loginLoadIndex = layer.load(2);
$('#loginBtn').val("正在登錄...");
$.ajax({
type:'post',
url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
dataType:'html',
data:JSON.stringify(params),
contentType:'application/json',
success:function (data) {
layer.close(loginLoadIndex);
var jsonData = JSON.parse(data);
if (jsonData.code == '999'){
window.location.href = './static/templates/main.html';
}
},
error:function () {
layer.close(loginLoadIndex);
$('#loginBtn').val("登錄");
}
});
}
}
// 注冊流程
function register() {
layer.open({
type:'1',
content:$('.registerPage'),
title:'注冊',
area:['430px','400px'],
btn:['注冊','重置','取消'],
closeBtn:'1',
btn1:function (index,layero) {
//注冊回調(diào)
layer.close(index);
var registerUsername = $('#registerUsername').val();
var registerPassword = $('#registerPassword').val();
var registerWellPassword = $('#registerWellPassword').val();
var selectValue = $('#roleSelect option:selected').val();
var params = {};
params.registerUsername = registerUsername;
params.registerPassword = registerPassword;
params.registerWellPassword = registerWellPassword;
params.selectValue = selectValue;
var registerLoadIndex = layer.load(2);
$.ajax({
type:'post',
url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
dataType:'json',
data:JSON.stringify(params),
contentType:'application/json',
success:function (data) {
layer.close(registerLoadIndex);
layer.msg(data);
},
error:function () {
layer.close(registerLoadIndex);
layer.alert("請求超時！")
}
});
},
btn2:function (index,layero) {
//重置回調(diào)
var registerUsername = $('#registerUsername').val("");
var registerPassword = $('#registerPassword').val("");
var registerWellPassword = $('#registerWellPassword').val("");
// 防止注冊頁面關(guān)閉
return false;
},
btn3:function (index,layero) {
//取消回調(diào)
}
})
}
</script>
</body>
<div class="registerPage">
<div class="registerDiv">
<form>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>用戶名:</label>
</div>
<div class="usernameDiv">
<i class="layui-icon layui-icon-username adminIcon"></i>
<input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="輸入用戶名" >
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>密碼:</label>
</div>
<div class="passwordDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="輸入密碼">
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>確認(rèn)密碼:</label>
</div>
<div class="passwordDiv">
<i class="layui-icon layui-icon-password adminIcon"></i>
<input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="輸入密碼">
</div>
</div>
<div class="usernameWrapDiv">
<div class="usernameLabel">
<label>角色類型:</label>
</div>
<div class="passwordDiv">
<select id="roleSelect" class="layui-select">
<option value="">請選擇...</option>
<option value="0">經(jīng)紀(jì)人</option>
<option value="1">房東</option>
</select>
</div>
</div>
</form>
</div>
</div>
</html>
css
/*登陸表單樣式 start*/
.wrap{
width: 100%;
height: 100%;
background: url("../images/back.jpg") no-repeat;
background-size: cover;
}
.loginForm{
margin-left: 35%;
margin-top: 10%;
/*background-color: #cccccc;*/
background-color: #e7e7e7;
width: 400px;
height: 400px;
float: left;
z-index: 9999;
position: fixed;
opacity: 0.75;
}
.usernameDiv{
width: 300px;
height: 40px;
padding-left: 130px;
padding-top: 30px;
}
.adminInput{
width: 200px;
height: 40px;
font-size: 15px;
border-radius: 0.5em;
/*margin-left: auto;*/
/*border: 1px solid #cccccc;*/
}
.passwordDiv{
width: 300px;
height: 40px;
padding-left: 130px;
padding-top: 28px;
}
.cardDiv{
width: 120px;
height: 40px;
padding-top: 28px;
padding-left: 14px;
float: left;
}
.cardInput{
width: 124px;
height: 40px;
font-size: 15px;
border-radius: 0.5em 0em 0em 0.5em;
}
.codeDiv{
width: 100px;
height: 40px;
padding-top: 28px;
padding-right: 20px;
float: left;
}
.codeInput{
width: 80px;
height: 40px;
font-size: 15px;
border-radius: 0em 0.5em 0.5em 0em;
/*驗證碼樣式*/
font-family: Arial;
font-style: italic;
font-weight: bold;
/*border: 0;*/
letter-spacing: 2px;
cursor: pointer;
}
i{
position: absolute;
}
.adminIcon{
font-size: 22px;
margin-top: 8px;
margin-left: 165px;
}
.logoHead{
width: 250px;
height: 60px;
padding-left: 90px;
padding-top: 25px;
}
.usernameLabel{
width: 60px;
height: 30px;
font-size: 16px;
float: left;
margin-left: 55px;
margin-top: 40px;
}
.submitLabel{
width: 160px;
height: 30px;
font-size: 13px;
float: left;
margin-left: 55px;
margin-top: 40px;
cursor: pointer;
}
.usernameWrapDiv{
width: 400px;
height: 70px;
}
.submitDiv{
width: 150px;
height: 40px;
padding-left: 10px;
padding-top: 28px;
float: left;
}
.submit{
width: 100px;
height: 40px;
border-radius: 0.5em;
}
img{
position: absolute;
}
.imgStyle{
width: 100%;
height: 100%;
}
/*登陸表單樣式 end*/
/*注冊頁面樣式 start*/
.registerPage{
width: 100%;
height: 100%;
/*background-color: #cccccc;*/
display: none;
opacity: 0.75;
}
.registerDiv{
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0.75;
}
/*注冊頁面樣式 end*/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JS圖片預(yù)加載 JS實現(xiàn)圖片預(yù)加載應(yīng)用
由于圖片加載慢，導(dǎo)致用戶體驗特別差，本文將介紹一種圖片預(yù)加載技術(shù)，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了Javascript如何理解全國甲卷高考作文,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
需要隱藏input file然后獲取它的值，但連jquery都無法獲取它的值，下面與大家分享下使用js的具體獲取方法，感興趣的朋友可以參考下哈2013-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)非常棒的彈出div，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
uniapp中scroll-view基礎(chǔ)用法示例代碼
我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Javascript的promise,async和await的區(qū)別詳解
這篇文章主要為大家詳細(xì)介紹了Javascript的promise,async和await的區(qū)別，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
獲取文本框值的實現(xiàn)代碼2009-02-02
ES6 Map結(jié)構(gòu)的應(yīng)用實例分析
這篇文章主要介紹了ES6 Map結(jié)構(gòu)的應(yīng)用,結(jié)合實例形式分析了ES6中map鍵值對hash結(jié)構(gòu)相關(guān)定義、獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
本文通過實例代碼給大家分享javascript實現(xiàn)彈出廣告功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于ES6入門教程之變量的解構(gòu)賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04