用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"><iclass="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"><iclass="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"><iclass="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"><iclass="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"><iclass="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"><iclass="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>

这是注册页面，点击一下登录按钮就会重新跳转登录界面。注册页面有很重要的一点的就是必须点同意才能继续注册。

用layui做一个简易的登录注册页面相关推荐

使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能
使用vue-cli+element-ui+expsess+mysql做一个简易的登录功能 1使用webpack下载vue模板 vue init webpack aaa(aaa为项目名称) cd到aaa ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
HTML+CSS+PHP+COOKIE在本地搭建一个简易的登陆注册网页
昨天晚上看了一叶飘零大佬的直播,大佬说:初学者最好自己先动手去做一些项目,这样能更好的了解原理,恰好学长要求做一个简易的登陆注册系统,利用这个机会再学习一波. 做了两天,搞懂了很多概念,也遇到了很多问 ...
一个简单的登录注册网页的实现
一个简单的登录注册网页的实现通过标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
如何设计出用户体验良好的登录/注册页面
对于开发者来说登录/注册页面是再熟悉不过的了,然而要想提供更好的登录/注册体验的话就需要一些技巧了.应用了下面这些小技巧的话,你的登录注册页面在实现基本功能的同时还能提供非常流畅的体验. 1.不要将& ...
【新手向】Python做一个简易登录注册GUI界面(无事件绑定)
Python做一个简易登录注册GUI界面一,效果展示 (1)运行结果: (2)点击登录: 注:只有用户名:123 密码123456 会提示登录成功. 登录成功示范: 登录失败示范: (3)点击注册 ...
如何用idea做一个简易的网页登录界面
在上一节课的内容基础上做一个简易的网页登录界面--18级软工1班03 打开idea后打开上一节课的工程文件(一般在打开idea软件的同时,idea会默认打开上一次的文件)并在左边列表的main文件夹下 ...
用HTML写一个简易的登录界面
用HTML写一个简易的登录界面主要应用知识 img图片标签表单的知识下拉框以及单选框和多选框锚链接以及email验证码先看成品再看代码会理解的更快 <!DOCTYPE html&g ...
基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...

用layui做一个简易的登录注册页面

用layui做一个简易的登录注册页面

用layui做一个简易的登录注册页面相关推荐

最新文章

热门文章