主要的结构

先导入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. Beyond Compare-这款检查图片工具真的绝了!

    无论是出去旅游,还是参加聚会,在朋友圈分享美美的图片,已经成为了很多都市人的日常.在分享图片前,大多数人都会选择使用滤镜.风格等功能对照片进行一定的美化.但有时候美化的程度比较轻微,连修图的人都无法判 ...

  2. 用MindManager画思维导图的好处有哪些？

    大家都听说过思维导图吧?有没有将这样一种图形思维工具真正运用到我们的日常生活中去呢?是否真的知道思维导图怎么用呢?今天小编就来给大家讲一讲,思维导图怎么用. 老规矩,先给大家讲一讲小编用的软件跟系统, ...

  3. 理解与使用Treiber Stack

    目录 背景 名称由来 CompletableFuture源码实现 FutureTask实现 Treiber Stack抽象实现 入栈 出栈 示例 参考 背景 最近在很多JDK源码中都看到了Treibe ...

  4. python字节自适应转化单位KB、MB、GB

    文件存储或者传输的过程中,经常需要展示传输文件的大小,或者传输量的大小,为了方便给人展示和阅读,编写一个简单的单位转换器. 1 def hum_convert(value): 2 units = [& ...

  5. 关于UILabel标签控件的使用小节

    前段时间一直想停下来,总结一下近期在开发中遇到的一些问题顺便分享一下解决问题的思路和方法,无奈人生就像蒲公英,看似自由却身不由己.太多的时间和精力被占用在新项目的开发和之前项目的维护中,总之一句话外包 ...

  6. Java集合【3】-- iterable接口超级详细解析

    目录 iterable接口 1. 内部定义的方法 1.1 iterator()方法 1.2 forEach()方法 1.3 spliterator()方法 总结 iterable接口 整个接口框架关系 ...

  7. guava中的SettableFuture分析

    当缓存中没有要找的数据时,则要从数据库中去查询,而当并发量比较大时可能会击穿数据库,所以guava cache对同一值的查询做了合并请求的处理.其中就用到了SettableFuture,类似一把锁,只 ...

  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. Python中自定义类如果重写了__repr__方法为什么会影响到str的输出？

    这是因为Python3中,str的输出是调用类的实例方法__str__来输出,如果__str__方法没有重写,则自动继承object类的__str__方法,而object类的__str__方法是调用_ ...

  10. IT人的5G网络架构视点：从网络架构演进的前世今生详解5G各NF网络功能体

    一.引言 以前从来没关注电信无线上网网络的具体架构(也即PS域架构),现在开始学5G接触这些东西时,理解起来很痛苦,资料也少,于是一方面到处找人咨询,一方面到处查资料,最后发现应该从3G.4G时代的架 ...