标签：layer 登录 form color layui value login 页面
用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>
这是注册页面，点击一下登录按钮就会重新跳转登录界面。注册页面有很重要的一点的就是必须点同意才能继续注册。
标签：layer,登录,form,color,layui,value,login,页面 来源： https://blog.csdn.net/weixin_44219955/article/details/112437147
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。