主要的结构

先导入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. 工作一年半被裁掉，机缘巧合拿到阿里P7offer，得亏我看过这份“突击”面试宝典

    前言 不论是校招还是社招都避免不了各种⾯试.笔试,如何去准备这些东⻄就显得格外重要.不论是笔试还是⾯试都是有章可循的,我这个"有章可循"说的意思只是说应对技术⾯试是可以提前准备,所 ...

  2. 如何使用iMazing编辑iOS设备的备份

    乍一看,编辑iPhone或iPad的备份似乎是一个奇怪的命题,但实际上这样做的原因有很多,例如在备份数据损坏时进行修复,又如合并来自不同设备的数据. iMazing对备份文件编辑的支持非常全面,即使备 ...

  3. WebsitePanel密码解密

    WebsitePanel是一套Windows系统中的虚拟主机管理系统,可以同时管理多台服务器. 通过反编译该系统的dll发现该系统的密码加密方式可逆. 解密流程 1,获取密钥 密钥保存在  Enter ...

  4. kubernetes-dashboard.yaml

    # Copyright 2017 The Kubernetes Authors.## Licensed under the Apache License, Version 2.0 (the " ...

  5. zk与eureka区别

    cap永远的神!

  6. 记一次Ddos遭遇

    万年不用的vps最近借朋友用了几天,今天突然跟我说连不上了 上服务器先暴力重启一波 还是不行,netstat一看 端口的连接状态是这个样子: 估计连接被打满了,遂换了个端口 重启之 问题解决

  7. 【mq读书笔记】Index索引文件

    1.IndexHeader头部,40字节,记录IndexFile的统计信息: begainTimestamp:该索引文件中包含消息的最小存储时间 endTimestamp:该索引文件中包含消息的最大存 ...

  8. Python机器学习笔记：异常点检测算法——LOF（Local Outiler Factor）

    完整代码及其数据,请移步小编的GitHub 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/MachineLearningNote 在数据挖掘方面,经常需 ...

  9. 5.1 Spring5源码--Spring AOP源码分析一

    目标: 1.什么是AOP, 什么是AspectJ, 2. 什么是Spring AOP 3. Spring AOP注解版实现原理 4. Spring AOP切面原理解析 一. 认识AOP 1.1 什么是 ...

  10. C#设计模式-组合模式（Composite Pattern）

    概念 组合是一种结构型设计模式, 你可以使用它将对象组合成树状结构, 并且能像使用独立对象一样使用它们. 组合模式(Composite Pattern)是将对象组合成树形结构以表示'部分-整体'的层次 ...