用layui做一个简易的登录注册页面
1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导致用户体验感比较差。
<script>
//JavaScript代码区域
layui.use(['element', 'layer'], function () {
var element = layui.element;
var layer = layui.layer;
$('#login').on('click', function () {
layer.open({
type: 2, //弹出一个页面层
title: "登录",
content: 'login.html',
area: ['500px', '500px'],
anim: 1
})
})
});
</script>
2.这样用户点击登录就会弹出login.html,就是以下页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.login_line1 img{
margin-left: 155px;
}
form{
margin-left: 15px;
}
.login_line3 i{
cursor: pointer;
}
.login_other_l{
display: inline-block;
transform: translateY(-90%);
width: 140px;
height: 1px;
border-bottom: 1px solid #eee;
margin-right: 20px;
}
.login_other_r{
display: inline-block;
transform: translateY(-90%);
width: 140px;
height: 1px;
border-bottom: 1px solid #eee;
margin-left: 20px;
}
.login_line3 i{
font-size: 50px;
}
.login_line3 i:nth-child(1){
margin-left: 70px;
color: green;
}
.login_line3 i:nth-child(2){
margin-left: 80px;
color: #FE5134;
}
.login_line3 i:nth-child(3){
margin-left: 80px;
color: #12B7F5;
}
.login_line7 .login_rem{
margin-left: 250px;
}
input{
max-width: 350px;
}
.login_rem a{
color: #FD5353;
}
.login_line8 button{
width: 210px;
}
.login_line8 button:first-child{
margin-left: 5px;
background-color: #fff;
border:1px solid #FD5353;
color: #FD5353;
}
.login_line8 button:last-child{
margin-left: 15px;
background-color: #FD5353;
border:1px solid #FD5353;
}
.layui-form-checked[lay-skin=primary] i{
border-color:#FD5353 !important;
}
.layui-form-checked i, .layui-form-checked:hover i{
background-color: #FD5353 !important;
}
</style>
</head>
<body>
<div class="layui-row">
<form action="" class="layui-form layui-form-pane layui-col-md4 layui-col-md-offset3">
<!-- 第一行-->
<div class="layui-form-item login_line1">
<img src="img/logo@2x.png" alt="">
</div>
<!--第二行-->
<div class="layui-form-item login_line2">
<i class="login_other_l"></i>第三方账号注册/登录<i class="login_other_r"></i>
</div>
<!--带三行-->
<div class="layui-form-item login_line3">
<i class="layui-icon layui-icon-login-wechat"></i>
<i class="layui-icon layui-icon-login-weibo"></i>
<i class="layui-icon layui-icon-login-qq"></i>
</div>
<!--第四行-->
<div class="layui-form-item login_line4">
<i class="login_other_l"></i>使用手机号注册/登录<i class="login_other_r"></i>
</div>
<!--第五行-->
<div class="layui-form-item login_line5">
<label class="layui-form-label"><i
class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="username" class="layui-input"
placeholder="请输入用户名"/>
</div>
</div>
<!-- 第六行-->
<div class="layui-form-item login_line6">
<label class="layui-form-label"><i
class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="password" class="layui-input"
placeholder="请输入密码"/>
</div>
</div>
<!-- 第七行-->
<div class="layui-form-item login_line7">
<input type="checkbox" name="" title="下次自动登录" lay-skin="primary" checked>
<span class="login_rem"><a href="#">忘记密码</a></span>
</div>
<div class="layui-form-item login_line8">
<button class="layui-btn register">注册</button>
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
</div>
</form>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use(['form','layer'],function (){
var layer=layui.layer;
var form =layui.form;
form.verify({
username: function(value){
if(value.length ==0){
return '用户名不能为空';
}
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
if(value === 'xxx'){
alert('用户名不能为敏感词');
return true;
}
}
,password: [
/^[\S]{6,12}$/
,'密码必须6到12位,且不能出现空格'
]
// ,phone:[
// /^[1][0-9]{10}$/
// ,'手机号格式不正确'
// ]
});
$(".register").on('click',function (){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layer.open({
type:2, //弹出一个页面层
title:"注册",
content:'register.html',
area: ['500px', '550px'],
anim:1
})
})
})
</script>
</body>
</html>
这里面给注册绑定了一个点击事件,先关闭掉之前的弹窗,再打开一个新页面,这里面也添加了一点表单验证,这样可以减少后端数据处理的压力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.header {
background: #FD5353;
border-radius: 10px 10px 0px 0px;
}
form {
margin: 10px 15px 15px;
}
.header h1 {
color: #FFFFFF;
}
.huoqu {
background: #fff;
color: #0C0C0C;
border: 1px solid #E6E6E6;
}
.huoqu:hover {
color: #0C0C0C;
}
.zhuce {
width: 100%;
background: #FD5353;
color: #fff;
font-size: 18px;
border-radius: 5px;
}
.zhuce:hover {
opacity: 1;
}
.layui-form-checked[lay-skin=primary] i {
border-color: #FD5353 !important;
}
.layui-form-checked i, .layui-form-checked:hover i {
background-color: #FD5353 !important;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="layui-row">
<form action="" class="layui-form layui-form-pane layui-col-xs11">
<!-- 第一行-->
<div class="layui-form-item layui-row header">
<h1 class="layui-col-xs6 layui-col-xs-offset3">注册蜻蜓FM账号</h1>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><i
class="layui-icon layui-icon-username"></i></label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="username" class="layui-input"
placeholder="请输入用户名"/>
</div>
</div>
<!-- 第二行-->
<div class="layui-form-item">
<label class="layui-form-label">
<i class="layui-icon layui-icon-cellphone"></i></label>
<div class="layui-input-block">
<input type="tel" name="phone" lay-verify="phone" class="layui-input"
placeholder="请输入手机号"/>
</div>
</div>
<!-- 第三行-->
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs8">
<label class="layui-form-label"><i
class="layui-icon layui-icon-vercode"></i></label>
<div class="layui-input-block">
<input type="text" name="vercode" lay-verify="vercode" class="layui-input"
placeholder="请输入验证码"/>
</div>
</div>
<div class="layui-col-xs2 layui-col-xs-offset1">
<button class="layui-btn huoqu">发送验证码</button>
</div>
</div>
</div>
<!-- 第四行-->
<div class="layui-form-item">
<label class="layui-form-label"><i
class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input type="password" id="pwd1" name="password" lay-verify="password" class="layui-input"
placeholder="请输入密码"/>
</div>
</div>
<!-- 第五行-->
<div class="layui-form-item">
<label class="layui-form-label"><i
class="layui-icon layui-icon-password"></i></label>
<div class="layui-input-block">
<input type="password" id="pwd2" name="password" lay-verify="password_twice" class="layui-input"
placeholder="请再次输入密码"/>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" id="key_service" lay-verify="check" name="" title="我已阅读并同意 <a href='#'>《用户协议》</a><a>《隐私政策》</a>"
lay-skin="primary">
</div>
<div class="layui-form-item layui-row ">
<button class="layui-btn zhuce" lay-submit>注册</button>
</div>
<div class="layui-form-item layui-row">
<div class="layui-col-xs4 layui-col-xs-offset4">
<span>已有账号?</span><a href="#" class="newlogin">直接登录</a>
</div>
</div>
</form>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['form', 'layer'], function () {
var form = layui.form;
var layer = layui.layer;
form.render();
form.verify({
username: function (value) {
if (value.length == 0) {
return '用户名不能为空';
}
if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
return '用户名不能有特殊字符';
}
if (/(^\_)|(\__)|(\_+$)/.test(value)) {
return '用户名首尾不能出现下划线\'_\'';
}
if (/^\d+\d+\d$/.test(value)) {
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
if (value === 'xxx') {
alert('用户名不能为敏感词');
return true;
}
}
, password: [
/^[\S]{6,12}$/
, '密码必须6到12位,且不能出现空格'
]
,password_twice:function (value){
var newpwd=$("#pwd1").val()
if(value.length==0){
return '密码必须6到12位,且不能出现空格'
}
if(newpwd!=value){
return '密码必须保持一致哟'
}
}
, phone: [
/^[1][0-9]{10}$/
, '手机号格式不正确'
]
, vercode: [
/[\S]+/,
'请输入验证码'
]
,check:function (){
var checked=$("#key_service").get(0)
if (checked.checked==false){
// layer.msg("请勾选协议",{icon:5,time:2000,anim: 6})
return '请勾选协议'
}
}
});
$(".newlogin").on('click', function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layer.open({
type: 2, //弹出一个页面层
title: "登录",
content: 'login.html',
area: ['500px', '500px'],
anim: 1
})
})
})
</script>
</body>
</html>
这是注册页面,点击一下登录按钮就会重新跳转登录界面。注册页面有很重要的一点的就是必须点同意才能继续注册。