format:代码
bobi
parent
e9069f2a58
commit
9bbbba7b31
277
index.html
277
index.html
|
|
@ -1,148 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="css/okadmin.css">
|
||||
<link rel="stylesheet" href="../../nodejs/gulp_util/css/okadmin.theme.css">
|
||||
</head>
|
||||
<body class="layui-layout-body">
|
||||
<div class="layui-layout layui-layout-admin okadmin blue_theme"><!-- 主题在此加 例子orange_theme -->
|
||||
<!--头部导航-->
|
||||
<div class="layui-header okadmin-header">
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="layui-nav-item">
|
||||
<a class="ok-menu ok-show-menu" href="javascript:" title="菜单切换">
|
||||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
<!--天气信息-->
|
||||
<!--
|
||||
<li class="ok-nav-item ok-hide-md">
|
||||
<div class="weather-ok">
|
||||
<iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item ok-input-search">
|
||||
<input type="text" placeholder="搜索..." class="layui-input layui-input-search"/>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a class="ok-refresh" href="javascript:" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh-3"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="no-line layui-nav-item layui-hide-xs">
|
||||
<a id="notice" class="flex-vc pr10 pl10" href="javascript:">
|
||||
<i class="ok-icon ok-icon-notice icon-head-i" title="系统公告"></i>
|
||||
<span class="layui-badge-dot"></span>
|
||||
<cite></cite>
|
||||
</a>
|
||||
</li>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="css/okadmin.css">
|
||||
</head>
|
||||
<body class="layui-layout-body">
|
||||
<!-- 更换主体 Eg:orange_theme|blue_theme -->
|
||||
<div class="layui-layout layui-layout-admin okadmin blue_theme">
|
||||
<!--头部导航-->
|
||||
<div class="layui-header okadmin-header">
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="layui-nav-item">
|
||||
<a class="ok-menu ok-show-menu" href="javascript:" title="菜单切换">
|
||||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
<!--天气信息-->
|
||||
<!--
|
||||
<li class="ok-nav-item ok-hide-md">
|
||||
<div class="weather-ok">
|
||||
<iframe frameborder="0" scrolling="no" class="iframe-style" src="pages/weather.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item ok-input-search">
|
||||
<input type="text" placeholder="搜索..." class="layui-input layui-input-search"/>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a class="ok-refresh" href="javascript:" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh-3"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="no-line layui-nav-item layui-hide-xs">
|
||||
<a id="notice" class="flex-vc pr10 pl10" href="javascript:">
|
||||
<i class="ok-icon ok-icon-notice icon-head-i" title="系统公告"></i>
|
||||
<span class="layui-badge-dot"></span>
|
||||
<cite></cite>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="no-line layui-nav-item layui-hide-xs">
|
||||
<a id="lock" class="flex-vc pr10 pl10" href="javascript:">
|
||||
<i class="ok-icon ok-icon-lock icon-head-i" title="锁屏"></i><cite></cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="no-line layui-nav-item layui-hide-xs">
|
||||
<a id="lock" class="flex-vc pr10 pl10" href="javascript:">
|
||||
<i class="ok-icon ok-icon-lock icon-head-i" title="锁屏"></i><cite></cite>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="layui-nav-item layui-hide-xs">
|
||||
<a id="fullScreen" class=" pr10 pl10" href="javascript:">
|
||||
<i class="layui-icon layui-icon-screen-full"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs">
|
||||
<a id="fullScreen" class=" pr10 pl10" href="javascript:">
|
||||
<i class="layui-icon layui-icon-screen-full"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="no-line layui-nav-item">
|
||||
<a href="javascript:">
|
||||
<img src="images/avatar.png" class="layui-nav-img">
|
||||
bobi
|
||||
<li class="no-line layui-nav-item">
|
||||
<a href="javascript:">
|
||||
<img src="images/avatar.png" class="layui-nav-img">
|
||||
bobi
|
||||
</a>
|
||||
<dl id="userInfo" class="layui-nav-child">
|
||||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/member/user-pwd.html">安全设置</a></dd>
|
||||
<dd><a lay-id="u-4" href="javascript:" id="alertSkin">皮肤动画</a></dd>
|
||||
<dd>
|
||||
<hr/>
|
||||
</dd>
|
||||
<dd><a href="javascript:void(0)" id="logout">退出登录</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--遮罩层-->
|
||||
<div class="ok-make"></div>
|
||||
<!--左侧导航区域-->
|
||||
<div class="layui-side layui-side-menu okadmin-bg-20222A ok-left">
|
||||
<div class="layui-side-scroll okadmin-side">
|
||||
<div class="okadmin-logo">ok-admin v2.0</div>
|
||||
<div class="user-photo">
|
||||
<a class="img" title="我的头像">
|
||||
<img src="images/avatar.png" class="userAvatar">
|
||||
</a>
|
||||
<p>你好！<span class="userName">bobi</span>, 欢迎登录</p>
|
||||
</div>
|
||||
<!--左侧导航菜单-->
|
||||
<ul id="navBar" class="layui-nav okadmin-nav okadmin-bg-20222A layui-nav-tree">
|
||||
<li class="layui-nav-item layui-this">
|
||||
<a href="javascript:" lay-id="1" data-url="pages/console.html">
|
||||
<i is-close=false class="ok-icon"></i>
|
||||
控制台
|
||||
</a>
|
||||
<dl id="userInfo" class="layui-nav-child">
|
||||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/member/user-pwd.html">安全设置</a></dd>
|
||||
<dd><a lay-id="u-4" href="javascript:" id="alertSkin">皮肤动画</a></dd>
|
||||
<dd>
|
||||
<hr/>
|
||||
</dd>
|
||||
<dd><a href="javascript:void(0)" id="logout">退出登录</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--遮罩层-->
|
||||
<div class="ok-make"></div>
|
||||
<!--左侧导航区域-->
|
||||
<div class="layui-side layui-side-menu okadmin-bg-20222A ok-left">
|
||||
<div class="layui-side-scroll okadmin-side">
|
||||
<div class="okadmin-logo">ok-admin v2.0</div>
|
||||
<div class="user-photo">
|
||||
<a class="img" title="我的头像">
|
||||
<img src="images/avatar.png" class="userAvatar">
|
||||
</a>
|
||||
<p>你好！<span class="userName">bobi</span>, 欢迎登录</p>
|
||||
</div>
|
||||
<!--左侧导航菜单-->
|
||||
<ul id="navBar" class="layui-nav okadmin-nav okadmin-bg-20222A layui-nav-tree">
|
||||
<li class="layui-nav-item layui-this">
|
||||
<a href="javascript:" lay-id="1" data-url="pages/console.html">
|
||||
<i is-close=false class="ok-icon"></i>
|
||||
控制台
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容主体区域 -->
|
||||
<div class="content-body">
|
||||
<div class="layui-tab ok-tab" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
|
||||
<div data-id="left" id="okLeftMove" class="ok-icon ok-icon-back okadmin-tabs-control move-left okNavMove"></div>
|
||||
<div data-id="right" id="okRightMove" class="ok-icon ok-icon-right okadmin-tabs-control move-right okNavMove"></div>
|
||||
<div class="layui-icon okadmin-tabs-control ok-right-nav-menu" style="right: 0;">
|
||||
<ul class="okadmin-tab">
|
||||
<li class="no-line okadmin-tab-item">
|
||||
<div class="okadmin-link layui-icon-down" href="javascript:;"></div>
|
||||
<dl id="tabAction" class="okadmin-tab-child layui-anim-upbit layui-anim">
|
||||
<dd><a data-num="1" href="javascript:">关闭当前标签页</a></dd>
|
||||
<dd><a data-num="2" href="javascript:">关闭其他标签页</a></dd>
|
||||
<dd><a data-num="3" href="javascript:">关闭所有标签页</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
|
||||
<li class="layui-this" lay-id="1" tab="index">
|
||||
<i class="ok-icon"></i>
|
||||
<cite is-close=false>控制台</cite>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="tabContent" class="layui-tab-content ok-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<iframe src='pages/console.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--底部信息-->
|
||||
<div class="layui-footer okadmin-text-center">
|
||||
Copyright ©2019-©2020 ok-admin v2.0 All Rights Reserved
|
||||
<button class="layui-btn layui-btn-danger layui-btn-xs donate">捐赠作者</button>
|
||||
<button class="layui-btn layui-btn-danger layui-btn-xs communication">QQ群交流</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yy"></div>
|
||||
<!--js逻辑-->
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script src="js/okadmin.js"></script>
|
||||
</body>
|
||||
|
||||
<!-- 内容主体区域 -->
|
||||
<div class="content-body">
|
||||
<div class="layui-tab ok-tab" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
|
||||
<div data-id="left" id="okLeftMove"
|
||||
class="ok-icon ok-icon-back okadmin-tabs-control move-left okNavMove"></div>
|
||||
<div data-id="right" id="okRightMove"
|
||||
class="ok-icon ok-icon-right okadmin-tabs-control move-right okNavMove"></div>
|
||||
<div class="layui-icon okadmin-tabs-control ok-right-nav-menu" style="right: 0;">
|
||||
<ul class="okadmin-tab">
|
||||
<li class="no-line okadmin-tab-item">
|
||||
<div class="okadmin-link layui-icon-down" href="javascript:;"></div>
|
||||
<dl id="tabAction" class="okadmin-tab-child layui-anim-upbit layui-anim">
|
||||
<dd><a data-num="1" href="javascript:">关闭当前标签页</a></dd>
|
||||
<dd><a data-num="2" href="javascript:">关闭其他标签页</a></dd>
|
||||
<dd><a data-num="3" href="javascript:">关闭所有标签页</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
|
||||
<li class="layui-this" lay-id="1" tab="index">
|
||||
<i class="ok-icon"></i>
|
||||
<cite is-close=false>控制台</cite>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="tabContent" class="layui-tab-content ok-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<iframe src='pages/console.html' frameborder="0" scrolling="yes" width="100%"
|
||||
height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--底部信息-->
|
||||
<div class="layui-footer okadmin-text-center">
|
||||
Copyright ©2018-©2019 ok-admin v2.0 All Rights Reserved
|
||||
<button class="layui-btn layui-btn-danger layui-btn-xs donate">捐赠作者</button>
|
||||
<button class="layui-btn layui-btn-danger layui-btn-xs communication">QQ群交流</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yy"></div>
|
||||
<!--js逻辑-->
|
||||
<script src="lib/layui/layui.js"></script>
|
||||
<script src="js/okadmin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,191 +1,201 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="page-fill">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 注册</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
<style>
|
||||
.register .tit {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.register .code-box {
|
||||
display: flex;
|
||||
}
|
||||
.register .code-box .btn-auth-code {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.form-reset{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 忘记密码</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
<style>
|
||||
.forget .tit {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.forget .code-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.forget .code-box .btn-auth-code {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.reset-password-form {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="page-fill">
|
||||
<div class="page-fill register" id="login">
|
||||
<form class="layui-form form-verify">
|
||||
<div class="layui-form-item tit">忘记密码</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="phone">输入手机号</label>
|
||||
<input type="text" lay-verify="required|phone" name="text" placeholder="请输入手机号"
|
||||
autocomplete="off" id="phone" maxlength="11" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item code-box">
|
||||
<label for="authCode">验证码</label>
|
||||
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码"
|
||||
id="authCode" autocomplete="off" maxlength="8" class="layui-input">
|
||||
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="submitVerify" lay-submit="">提交</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="./login.html">再去登录试试</a>
|
||||
</div>
|
||||
</form>
|
||||
<div class="page-fill forget" id="login">
|
||||
<form class="layui-form verify-user-form">
|
||||
<div class="layui-form-item tit">忘记密码</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" class="layui-input" id="username" name="username" placeholder="请输入账号" autocomplete="off" lay-verify="required">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="phone">输入手机号码</label>
|
||||
<input type="text" class="layui-input" id="phone" name="text" placeholder="请输入手机号码" autocomplete="off" lay-verify="required|phone" maxlength="11">
|
||||
</div>
|
||||
<div class="layui-form-item input-item code-box">
|
||||
<label for="captcha">验证码</label>
|
||||
<input type="text" class="layui-input" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="4">
|
||||
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="verifyUser" lay-submit="">提 交</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="login.html">再去登录试试</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form class="layui-form form-reset">
|
||||
<div class="layui-form-item tit">设置密码</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">新密码</label>
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off"
|
||||
id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="comPassword">确认密码</label>
|
||||
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off"
|
||||
id="comPassword" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="submitSetting" lay-submit="">确定设置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okGVerify", "okLayer"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okGVerify = layui.okGVerify;
|
||||
let okLayer = layui.okLayer;
|
||||
let regPhone = /^[1][0-9]{10}$/;/**手机号验证**/
|
||||
let setInter = '';/**定时器对象*/
|
||||
let second = 60;//设置时间
|
||||
let isSetPassword = false;//是否显示重设密码
|
||||
<form class="layui-form reset-password-form">
|
||||
<div class="layui-form-item tit">设置密码</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">新密码</label>
|
||||
<input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required|password">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="comPassword">确认密码</label>
|
||||
<input type="password" class="layui-input" id="comPassword" name="password" placeholder="请确认密码" autocomplete="off" lay-verify="required|comPassword">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="resetPassword" lay-submit="">确定设置</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okLayer", "okUtils"], function () {
|
||||
let $ = layui.jquery;
|
||||
let form = layui.form;
|
||||
let okLayer = layui.okLayer;
|
||||
let okUtils = layui.okUtils;
|
||||
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
phone: [
|
||||
regPhone,
|
||||
'输入的手机号格式不正确，请重新输入'
|
||||
],
|
||||
comPassword: function (val) {
|
||||
let password = $("#password").val();
|
||||
return password == val ? '' : "两次密码不一致";
|
||||
}
|
||||
});
|
||||
let phoneRegex = /^[1][0-9]{10}$/;
|
||||
let timer = "";
|
||||
let intervalTime = 60;
|
||||
|
||||
/**
|
||||
* 验证手机号表单提交
|
||||
*/
|
||||
form.on("submit(submitVerify)", function (data) {
|
||||
console.log("验证手机号",data);
|
||||
okLayer.msg.greenTick("验证成功,重设密码", function () {
|
||||
clearInterval(setInter);
|
||||
clearInterval(setInter);
|
||||
$('.btn-auth-code').removeClass("layui-btn-disabled");
|
||||
$('.btn-auth-code').text("重新获取");
|
||||
setInter = "";
|
||||
second = 60;
|
||||
$(".form-verify,.form-reset").toggle();
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**重新设置密码**/
|
||||
form.on("submit(submitSetting)", function (data) {
|
||||
console.log("重新设置密码",data);
|
||||
okLayer.msg.greenTick("密码重置成功,马上去登录", function () {
|
||||
window.location = "./login.html";
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
});
|
||||
|
||||
/**获取验证码**/
|
||||
$('.btn-auth-code').click(function () {
|
||||
let that = $(this),
|
||||
phone = $("#phone").val();
|
||||
if($(this).hasClass("layui-btn-disabled")){
|
||||
return;
|
||||
}
|
||||
if(regPhone.test(phone)){
|
||||
if(!setInter){
|
||||
clearInterval(setInter);
|
||||
that.addClass("layui-btn-disabled");
|
||||
that.text(second+"秒后获取");
|
||||
setInter = setInterval(function () {
|
||||
second--;
|
||||
if(second < 1){
|
||||
clearInterval(setInter);
|
||||
that.removeClass("layui-btn-disabled");
|
||||
that.text("重新获取");
|
||||
setInter = "";
|
||||
second = 60;
|
||||
}else{
|
||||
that.text(second+"秒后获取");
|
||||
}
|
||||
},1000);
|
||||
}
|
||||
}else{
|
||||
layer.msg("输入的手机号格式不正确，请重新输入",{
|
||||
icon:"5",
|
||||
anim:"6",
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
phone: [phoneRegex, "手机号格式不正确"],
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
comPassword: function (val) {
|
||||
let password = $("#password").val();
|
||||
return password == val ? "" : "两次密码不一致";
|
||||
}
|
||||
});
|
||||
$("#phone").focus();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
/**
|
||||
* 提交表单
|
||||
*/
|
||||
form.on("submit(verifyUser)", function (data) {
|
||||
okUtils.ajax("/verifyUser", "post", data.field, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick(response.msg, function () {
|
||||
// 样式修改
|
||||
$('.btn-auth-code').removeClass("layui-btn-disabled");
|
||||
$('.btn-auth-code').text("重新获取");
|
||||
// 重置定时器
|
||||
clearInterval(timer);
|
||||
timer = "";
|
||||
intervalTime = 60;
|
||||
// 显示重置密码表单
|
||||
$(".verify-user-form, .reset-password-form").toggle();
|
||||
});
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
$('.btn-auth-code').click(function () {
|
||||
let _this = $(this);
|
||||
if (_this.hasClass("layui-btn-disabled")) {
|
||||
return;
|
||||
}
|
||||
let phone = $("#phone").val();
|
||||
if (phoneRegex.test(phone)) {
|
||||
_this.addClass("layui-btn-disabled");
|
||||
_this.text(intervalTime + "秒后获取");
|
||||
// 按钮操作定时器
|
||||
timer = setInterval(function () {
|
||||
intervalTime--;
|
||||
if (intervalTime < 1) {
|
||||
clearInterval(timer);
|
||||
_this.removeClass("layui-btn-disabled");
|
||||
_this.text("重新获取");
|
||||
intervalTime = 60;
|
||||
} else {
|
||||
_this.text(intervalTime + "秒后获取");
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 发送手机验证码
|
||||
okUtils.ajax("/sendCaptcha", "post", null, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick(response.msg);
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
} else {
|
||||
layer.msg("手机号码格式不正确", {icon: "5", anim: "6"});
|
||||
$("#phone").focus();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 重置密码
|
||||
*/
|
||||
form.on("submit(resetPassword)", function (data) {
|
||||
okUtils.ajax("/resetPassword", "post", data.field, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick(response.msg, function () {
|
||||
window.location = "login.html";
|
||||
});
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
205
pages/login.html
205
pages/login.html
|
|
@ -1,110 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="page-fill">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 登录</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
</head>
|
||||
<body class="page-fill">
|
||||
<div class="page-fill" id="login">
|
||||
<form class="layui-form">
|
||||
<div class="login_face"><img src="../images/logo.png"></div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item captcha-box">
|
||||
<label for="captcha">验证码</label>
|
||||
<input type="text" lay-verify="required|captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" id="captcha" maxlength="4" class="layui-input">
|
||||
<div class="img ok-none-select" id="captchaImg"></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="./register.html">注册</a>
|
||||
<a href="./forget.html">忘记密码?</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okGVerify", "okUtils", "okMock", "okLayer"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okGVerify = layui.okGVerify;
|
||||
let okUtils = layui.okUtils;
|
||||
let okMock = layui.okMock;
|
||||
let okLayer = layui.okLayer;
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 登录</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
</head>
|
||||
<body class="page-fill">
|
||||
<div class="page-fill" id="login">
|
||||
<form class="layui-form">
|
||||
<div class="login_face"><img src="../images/logo.png"></div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item captcha-box">
|
||||
<label for="captcha">验证码</label>
|
||||
<input type="text" lay-verify="required|captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" id="captcha" maxlength="4" class="layui-input">
|
||||
<div class="img ok-none-select" id="captchaImg"></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="register.html">注册</a>
|
||||
<a href="forget.html">忘记密码?</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okGVerify", "okUtils", "okLayer"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okGVerify = layui.okGVerify;
|
||||
let okUtils = layui.okUtils;
|
||||
let okLayer = layui.okLayer;
|
||||
|
||||
/**
|
||||
* 初始化验证码
|
||||
*/
|
||||
let verifyCode = new okGVerify("#captchaImg");
|
||||
/**
|
||||
* 初始化验证码
|
||||
*/
|
||||
let verifyCode = new okGVerify("#captchaImg");
|
||||
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
captcha: function (val) {
|
||||
if (verifyCode.validate(val) != "true") {
|
||||
return verifyCode.validate(val)
|
||||
}
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
captcha: function (val) {
|
||||
if (verifyCode.validate(val) != "true") {
|
||||
return verifyCode.validate(val)
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
form.on("submit(login)", function (data) {
|
||||
okUtils.ajax(okMock.api.login, "post", data.field, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick(response.msg, function () {
|
||||
window.location = "../index.html";
|
||||
})
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
form.on("submit(login)", function (data) {
|
||||
okUtils.ajax("/login", "post", data.field, true).done(function (response) {
|
||||
console.log(response);
|
||||
okLayer.msg.greenTick(response.msg, function () {
|
||||
window.location = "../index.html";
|
||||
})
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,172 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="page-fill">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 注册</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
<style>
|
||||
#login form.layui-form{
|
||||
margin: 0;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.register .tit {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.register .code-box {
|
||||
display: flex;
|
||||
}
|
||||
.register .code-box .btn-auth-code {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>ok-admin v2.0 | 很赞的后台模版 - 注册</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
|
||||
<meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="../css/oksub.css"/>
|
||||
<style>
|
||||
#login form.layui-form {
|
||||
margin: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.register .tit {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.register .code-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.register .code-box .btn-auth-code {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="page-fill">
|
||||
<div class="page-fill register" id="login">
|
||||
<form class="layui-form ">
|
||||
<div class="layui-form-item tit">注册</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username"
|
||||
class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off"
|
||||
id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="comPassword">确认密码</label>
|
||||
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off"
|
||||
id="comPassword" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="phone">输入手机号</label>
|
||||
<input type="password" lay-verify="required|phone" name="text" placeholder="请输入手机号"
|
||||
autocomplete="off" id="phone" maxlength="11" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item code-box">
|
||||
<label for="authCode">验证码</label>
|
||||
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码"
|
||||
id="authCode" autocomplete="off" maxlength="8" class="layui-input">
|
||||
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">注册</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="./login.html">有账号去登录</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okGVerify", "okLayer"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okGVerify = layui.okGVerify;
|
||||
let okLayer = layui.okLayer;
|
||||
let regPhone = /^[1][0-9]{10}$/;/**手机号验证**/
|
||||
let setInter = '';/**定时器对象*/
|
||||
let second = 60;//设置时间
|
||||
/**
|
||||
* 初始化验证码
|
||||
*/
|
||||
// let verifyCode = new okGVerify("#captchaImg");
|
||||
<div class="page-fill register" id="login">
|
||||
<form class="layui-form ">
|
||||
<div class="layui-form-item tit">注册</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" lay-verify="required" name="username" placeholder="请输入账号" autocomplete="off" id="username" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="comPassword">确认密码</label>
|
||||
<input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item">
|
||||
<label for="phone">输入手机号</label>
|
||||
<input type="password" lay-verify="required|phone" name="text" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item input-item code-box">
|
||||
<label for="authCode">验证码</label>
|
||||
<input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
|
||||
<button type="button" class="layui-btn btn-auth-code">获取验证码</button>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-block" lay-filter="login" lay-submit="">注册</button>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
<a href="login.html">有账号去登录</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(["form", "okGVerify", "okLayer"], function () {
|
||||
let form = layui.form;
|
||||
let $ = layui.jquery;
|
||||
let okGVerify = layui.okGVerify;
|
||||
let okLayer = layui.okLayer;
|
||||
let regPhone = /^[1][0-9]{10}$/;
|
||||
/**手机号验证**/
|
||||
let setInter = '';
|
||||
/**定时器对象*/
|
||||
let second = 60;//设置时间
|
||||
/**
|
||||
* 初始化验证码
|
||||
*/
|
||||
// let verifyCode = new okGVerify("#captchaImg");
|
||||
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
phone: [
|
||||
regPhone,
|
||||
'输入的手机号格式不正确，请重新输入'
|
||||
],
|
||||
comPassword: function (val) {
|
||||
let password = $("#password").val();
|
||||
return password == val ? '' : "两次密码不一致";
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
form.on("submit(login)", function (data) {
|
||||
okLayer.msg.greenTick("注册成功,去登陆", function () {
|
||||
window.location = "./login.html";
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
});
|
||||
|
||||
/**获取验证码**/
|
||||
$('.btn-auth-code').click(function () {
|
||||
let that = $(this),
|
||||
phone = $("#phone").val();
|
||||
if($(this).hasClass("layui-btn-disabled")){
|
||||
return;
|
||||
}
|
||||
if(regPhone.test(phone)){
|
||||
if(!setInter){
|
||||
clearInterval(setInter);
|
||||
that.addClass("layui-btn-disabled");
|
||||
that.text(second+"秒后获取");
|
||||
setInter = setInterval(function () {
|
||||
second--;
|
||||
if(second < 1){
|
||||
clearInterval(setInter);
|
||||
that.removeClass("layui-btn-disabled");
|
||||
that.text("重新获取");
|
||||
setInter = "";
|
||||
second = 60;
|
||||
}else{
|
||||
that.text(second+"秒后获取");
|
||||
}
|
||||
},1000);
|
||||
}
|
||||
}else{
|
||||
layer.msg("输入的手机号格式不正确，请重新输入",{
|
||||
icon:"5",
|
||||
anim:"6",
|
||||
/**
|
||||
* 数据校验
|
||||
*/
|
||||
form.verify({
|
||||
password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
|
||||
phone: [
|
||||
regPhone,
|
||||
'输入的手机号格式不正确，请重新输入'
|
||||
],
|
||||
comPassword: function (val) {
|
||||
let password = $("#password").val();
|
||||
return password == val ? '' : "两次密码不一致";
|
||||
}
|
||||
});
|
||||
$("#phone").focus();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
form.on("submit(login)", function (data) {
|
||||
okLayer.msg.greenTick("注册成功,去登陆", function () {
|
||||
window.location = "./login.html";
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件单击时
|
||||
*/
|
||||
$("#login .input-item .layui-input").click(function (e) {
|
||||
e.stopPropagation();
|
||||
$(this).addClass("layui-input-focus").find(".layui-input").focus();
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件获取焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").focus(function () {
|
||||
$(this).parent().addClass("layui-input-focus");
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单input组件失去焦点时
|
||||
*/
|
||||
$("#login .layui-form-item .layui-input").blur(function () {
|
||||
$(this).parent().removeClass("layui-input-focus");
|
||||
if ($(this).val() != "") {
|
||||
$(this).parent().addClass("layui-input-active");
|
||||
} else {
|
||||
$(this).parent().removeClass("layui-input-active");
|
||||
}
|
||||
});
|
||||
|
||||
/**获取验证码**/
|
||||
$('.btn-auth-code').click(function () {
|
||||
let that = $(this),
|
||||
phone = $("#phone").val();
|
||||
if ($(this).hasClass("layui-btn-disabled")) {
|
||||
return;
|
||||
}
|
||||
if (regPhone.test(phone)) {
|
||||
if (!setInter) {
|
||||
clearInterval(setInter);
|
||||
that.addClass("layui-btn-disabled");
|
||||
that.text(second + "秒后获取");
|
||||
setInter = setInterval(function () {
|
||||
second--;
|
||||
if (second < 1) {
|
||||
clearInterval(setInter);
|
||||
that.removeClass("layui-btn-disabled");
|
||||
that.text("重新获取");
|
||||
setInter = "";
|
||||
second = 60;
|
||||
} else {
|
||||
that.text(second + "秒后获取");
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
layer.msg("输入的手机号格式不正确，请重新输入", {
|
||||
icon: "5",
|
||||
anim: "6",
|
||||
});
|
||||
$("#phone").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue