基于Layui的登录注册页面模板

这篇具有很好参考价值的文章主要介绍了基于Layui的登录注册页面模板。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在layui 版本2.8+中,提供了好看的登录注册模板。

目录

1、登录模板

(1)效果预览

(2)完整代码

2、注册模板 

(1)效果预览

​(2)完整代码


1、登录模板

(1)效果预览

官网地址:表单组件 form - Layui 文档

基于Layui的登录注册页面模板

(2)完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick Start - Layui</title>
  <!-- 引入layui css 文件 -->
  <link href="https://cdn.staticfile.org/layui/2.8.1/css/layui.css" rel="stylesheet">
  <style>
    .demo-login-container {
      width: 320px;
      margin: 21px auto 0;
    }

    .demo-login-other .layui-icon {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      top: 2px;
      font-size: 26px;
    }
  </style>
</head>

<body>
  <!-- 引入layui js 文件 -->
  <script src="https://cdn.staticfile.org/layui/2.8.1/layui.js"></script>

  <form class="layui-form">
    <div class="demo-login-container">
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名"
            autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码"
            autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-vercode"></i>
              </div>
              <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
                autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 10px;">
              <img src="https://www.oschina.net/action/user/captcha"
                onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
        <a href="#forget" style="float: right; margin-top: 7px;">忘记密码?</a>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
      </div>
      <div class="layui-form-item demo-login-other">
        <label>社交账号登录</label>
        <span style="padding: 0 21px 0 6px;">
          <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
        </span>
        或 <a href="#reg">注册帐号</a></span>
      </div>
    </div>
  </form>
  <script>
    layui.use(function () {
      var form = layui.form;
      var layer = layui.layer;
      // 提交事件
      form.on('submit(demo-login)', function (data) {
        var field = data.field; // 获取表单字段值
        // 显示填写结果,仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
        return false; // 阻止默认 form 跳转
      });
    });
  </script>
</body>

</html>

2、注册模板 

(1)效果预览

官网地址:表单组件 form - Layui 文档

(2)完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick Start - Layui</title>
  <!-- 引入layui css 文件 -->
  <link href="https://cdn.staticfile.org/layui/2.8.1/css/layui.css" rel="stylesheet">
  <style>
    .demo-reg-container {
      width: 320px;
      margin: 21px auto 0;
    }

    .demo-reg-other .layui-icon {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      top: 2px;
      font-size: 26px;
    }
  </style>
</head>

<body>
  <!-- 引入layui js 文件 -->
  <script src="https://cdn.staticfile.org/layui/2.8.1/layui.js"></script>


  <form class="layui-form">
    <div class="demo-reg-container">
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-cellphone"></i>
              </div>
              <input type="text" name="cellphone" value="" lay-verify="phone" placeholder="手机号" lay-reqtext="请填写手机号"
                autocomplete="off" class="layui-input" id="reg-cellphone">
            </div>
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 11px;">
              <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary"
                lay-on="reg-get-vercode">获取验证码</button>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-vercode"></i>
          </div>
          <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码"
            autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off"
            class="layui-input" id="reg-password" lay-affix="eye">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
            placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off"
            class="layui-input" lay-affix="clear">
        </div>
      </div>
      <div class="layui-form-item">
        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
        <a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
          <ins>用户协议</ins>
        </a>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
      </div>
      <div class="layui-form-item demo-reg-other">
        <label>社交账号注册</label>
        <span style="padding: 0 21px 0 6px;">
          <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
          <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
        </span>
        <a href="#login">登录已有帐号</a></span>
      </div>
    </div>
  </form>
  <script>
    layui.use(function () {
      var $ = layui.$;
      var form = layui.form;
      var layer = layui.layer;
      var util = layui.util;

      // 自定义验证规则
      form.verify({
        // 确认密码
        confirmPassword: function (value, item) {
          var passwordValue = $('#reg-password').val();
          if (value !== passwordValue) {
            return '两次密码输入不一致';
          }
        }
      });

      // 提交事件
      form.on('submit(demo-reg)', function (data) {
        var field = data.field; // 获取表单字段值

        // 是否勾选同意
        if (!field.agreement) {
          layer.msg('您必须勾选同意用户协议才能注册');
          return false;
        }

        // 显示填写结果,仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });

        // 此处可执行 Ajax 等操作
        // …

        return false; // 阻止默认 form 跳转
      });

      // 普通事件
      util.on('lay-on', {
        // 获取验证码
        'reg-get-vercode': function (othis) {
          var isvalid = form.validate('#reg-cellphone'); // 主动触发验证,v2.7.0 新增 
          // 验证通过
          if (isvalid) {
            layer.msg('手机号规则验证通过');
            // 此处可继续书写「发送验证码」等后续逻辑
            // …
          }
        }
      });
    });
  </script>
</body>

</html>

 文章来源地址https://www.toymoban.com/news/detail-503868.html

到了这里,关于基于Layui的登录注册页面模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于VUE3+Layui从头搭建通用后台管理系统(前端篇)二:登录界面及对应功能实现

      本章介绍系统登录界面、登录流程、登录接口等相关内容的开发,实现包括账号密码登录、短信验证登录等不同的登录方式,使用svg-capter生成图形验证码,使用expressjwt实现登录token的生成及验证。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击

    2024年02月11日
    浏览(64)
  • Layui网页模板

    2024年02月14日
    浏览(39)
  • LayUI模板引擎渲染数据

    接上节Spring boot项目开发实战——(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及python的jinja2,这些是后端的模板引擎,数据的渲染都需要借助服务器,对html重新解析,在特定标识符处填入数据。 No

    2023年04月08日
    浏览(39)
  • X-admin经典前端后台管理模板,基于layui的轻量级前端后台管理框架,简单,兼容性好,面向所有层次的前后端程序

    简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序。创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的。#X-admin从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。

    2024年02月16日
    浏览(56)
  • layui介绍以及登录功能的实现

    Layui 是一套开源免费的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,它更多是面向于后端开发者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现

    2024年02月16日
    浏览(39)
  • 获取Layui iframe页面的url参数

    弹出layui iframe页面 iframe页面中获取参数

    2024年02月12日
    浏览(55)
  • 基于Bootstrap的登录&注册模板(html+css)

    基于Bootstrap的登录注册模板(html+css),适合django等框架,可直接修改对接后端 登录、注册、输入信息错误提醒、记住密码、自动登录等等 GitHub:基于Bootstrap的登录注册模板【下载麻烦客官点颗Star】 CSDN资源:基于Bootstrap的登录注册模板(html+css)

    2024年02月12日
    浏览(44)
  • 在layui中使用vue,使用vue进行页面数据部分数据更新

    layui是一款非常优秀的框架,使用也非常的广泛,许多后台管理系统都使用layui,简单便捷,但是在涉及页面部分数据变化,就比较难以处理,比如一个页面一个提交页,提交之后部分数据实时进行更新,根据数据动态控制元素显示等。这些情况使用layui就需要自己用原始js方

    2024年02月11日
    浏览(47)
  • 【Java/SSM/LayUI】JavaEE课程设计(基于Layui+SSM的图书管理系统项目介绍及源码)

    注: 本文为JavaEE课程的课程设计,如需原文件及项目代码请后台联系作者或qq3416252112,也可在作者主页资源中下载,仅供学习交流使用! 一、项目介绍 ​ 结合本学期所学知识,以及以往积累的经验,我们通过Layui+SSM的方式完成了简化版的“图书管理系统”。本系统操作界面

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包