主要的结构

先导入layui的主要的js和css等

<html>

	<head>

		<meta charset="utf-8">

		<title>登录页面</title>

		<link rel="stylesheet" href="layui/css/layui.css">

		<script src=layui/layui.js></script>

		<script>

		//JavaScript代码区域

		layui.use('form', function(){

		  var  form=layui.form;

		  //监听提交

		    form.on('submit(formDemo)', function(data){

		      layer.msg(JSON.stringify(data.field));

		      return false;

		    });

			//自定义验证规则

			form.verify({

			  username: [

			    /^[\S]{6,12}$/

			    ,'用户名必须6到12位，且不能出现空格'

			  ],

			  password: [

			    /^[\S]{6,12}$/

			    ,'密码必须6到12位，且不能出现空格'

			  ]

			});

		});

		</script>

	</head>

	<body style="padding: 20px;">

		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

		  <legend>登录</legend>

		</fieldset>

		<form class="layui-form layui-form-pane" action="" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

		      <div class="layui-form-item">

		          <label class="layui-form-label">用户账号</label>

		          <div class="layui-input-inline">

		            <input type="username" name="uaername" required  lay-verify="username" placeholder="请输入用户" autocomplete="off" class="layui-input">

		          </div>

				  <i class="layui-icon" style="font-size: 30px; color: #1E9FFF;"></i>

		        </div>

		        <div class="layui-form-item">

		          <label class="layui-form-label">用户密码</label>

		          <div class="layui-input-inline">

		            <input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">

		          </div>

				  <i class="layui-icon layui-icon-password" style="font-size: 30px; color: #1E9FFF;"></i>

		        </div>

				  <div class="layui-form-item">

				    <div class="layui-input-block">

				      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

				      <button type="reset" class="layui-btn layui-btn-primary">重置</button>

				    </div>

				  </div>

		</form>

	</body>

</html>

　主要的导入的js文件跟css文件就是在自定以的验证规则中主要一下自己写的正则表达式。

主要的验证在这个lay-verify="username"里面可以写自己定义的，比如自带的同时支持多条规则的验证，格式：lay-verify="验证A|验证B"
如：lay-verify="required|phone|number"
另外，除了我们内置的校验规则，你还可以给他设定任意的值，
比如lay-verify="username"
那么你就需要借助form.verify()方法对username进行一个校验规则的定义

layui的登录页面设计的更多相关文章

  1. 1.注册或登录页面设计：UILabel，UIButton,UITextField

    学习iOS开发已经有一段时日了,之前一直没有系统的对iOS开发的相关知识进行归纳总结,导致很多知识点云里雾里在脑子里形不成iOS开发的思想,现将自己在学习过程中遇到的一些知识进行总结,希望能对iOS初 ...

  2. 【转载】拒绝平庸——浅谈WEB登录页面设计

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

  3. 拒绝平庸——浅谈WEB登录页面设计

    用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

  4. django登录页面设计：

    urls: """day42 URL Configuration The `urlpatterns` list routes URLs to views. For mor ...

  5. 模拟SWPU邮件登录页面

    模拟SWPU邮件登录页面设计流程 一.开发工具准备 本次开发该页面时使用的开发工具为vscode—— 在下载安装完成后,需要下载各类插件——如汉化.通过浏览器打开网页插件等. 二.开发过程 首先,打开 ...

  6. B/S结构-登录页面-测试用例设计

    页面描述: 有一个登陆页面, 假如上面有2个textbox, 一个提交按钮 测试需求: 请针对这个页面设计30个以上的testcase 功能测试(Function test) 0. 什么都不输入,点击 ...

  7. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  8. layui弹窗里面 session过期 后跳转到登录页面

    1.在登录页面添加 <script> $(function () { if (top != window) { layer.msg("登录失效", {icon: 5}) ...

  9. 一个最简单的登录页面测试case

    具体需求: 有一个登陆页面, (假如上面有2个textbox, 一个提交按钮. 请针对这个页面设计30个以上的testcase.) 此题的考察目的:面试者是否熟悉各种测试方法,是否有丰富的Web测试经 ...

随机推荐

  1. 做了两年java，这些高性能高可用高并发的技术架构你都知道吗？

    前言 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心.这样,你就能一次又一次地使用该方案而不必做重复工作. 所谓网站架构模式即为了解决大型网站面临的高并发访问.海量数据.高可靠 ...

  2. 怎么在苹果笔记本上用Folx重新下载已完成的任务

    大家在完成了任务下载后,有时会将下载的文件移动到其他文件夹中,或者是,当下载的文件已经使用完毕时,有些用户会将文件删除.以上的两种情况,都会导致Folx所属任务查看功能失效,也就是说,无法找到任务对应 ...

  3. 通用于wps和excel的ntlm hashes窃取利用方式

    https://evi1cg.me/archives/Get_NTLM_Hashes.html介绍了通过Microsoft Office 窃取 NTLM Hashes. 不过这种插入方法不适用于wps ...

  4. 【Azure微服务 Service Fabric 】Service Fabric中应用开启外部访问端口及微服务之间通过反向代理端口访问问题

    问题描述 1) 当成功的在Service Fabric集群中部署了应用后,如何来访问呢?如果是一个Web服务,它的URL又是什么呢? 2) 当Service Fabric集群中,服务之间如需要相互访问 ...

  5. python定时执行详解

    知识点 1. sched模块,准确的说,它是一个调度(延时处理机制),每次想要定时执行某任务都必须写入一个调度. (1)生成调度器:s = sched.scheduler(time.time,time ...

  6. 推荐：国产etl调度工具Taskctl web应用版，0元永久授权

    写在前面 2020年疫情席卷全球,更是对整个市场经济造成了严重影响,年初疫情肆虐,西方世界单方面的科技.经济封锁,国际关系吃紧.....导致很多中小型企业业务链受阻,大型企业经费资金吃紧,轮班制导致公 ...

  7. 1. 揭秘Spring类型转换 - 框架设计的基石

    仰不愧天,俯不愧人,内不愧心.关注公众号[BAT的乌托邦],有Spring技术栈.MyBatis.JVM.中间件等小而美的原创专栏供以免费学习.分享.成长,拒绝浅尝辄止.本文已被 https://ww ...

  8. LeetCode 038 Count and Say

    题目要求:Count and Say The count-and-say sequence is the sequence of integers beginning as follows:1, 11 ...

  9. rest-framework 响应器(渲染器)

    一 作用: 根据 用户请求URL 或 用户可接受的类型,筛选出合适的 渲染组件. 用户请求URL:    http://127.0.0.1:8000/test/?format=json    http ...

  10. Java数据结构（十三）—— 二叉排序树（BST）

    二叉排序树(BST) 需求 给定数列{7,3,10,12,5,1,9},要求能够高效的完成对数据的查询和添加 思路三则 使用数组,缺点:插入和排序速度较慢 链式存储,添加较快,但查找速度慢 使用二叉排 ...