主要的结构

先导入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. 文档丢失不用怕，EasyRecovery帮你一键恢复

    我们在使用电脑的过程中,有时会因为各种原因,导致我们所写的文档丢失了.遇到这种情况,该怎么办呢? 下面,就给大家分享一下用EasyRecovery如何恢复被丢失的文档. 1.双击进入EasyRecov ...

  2. Shamir秘密共享方案 (Python)

    Shamir's Secret Sharing scheme is an important cryptographic algorithm that allows private informati ...

  3. pytest的setup和teardown

    学过unittest的setup和teardown,前置和后置执行功能.pytest也有此功能并且功能更强大,今天就来学习一下吧. 用例运行级别: 模块级(setup_module/teardown_ ...

  4. C#设计模式-桥接模式（Bridge Pattern）

    引言 例如我有好几个项目,需要外包出去做各种类型的测试,不同的公司基础费用不同,不同的测试类型价格也是不同的.此时不同的项目选择不同的公司和不同类型的测试进行测试价格都是不同的.于是我们可以创建一个项 ...

  5. git原理-本地仓库认识

    项目人员使用git,几乎70%的工作都是在本地仓库完成的.由此可见本地仓库的重要性. 下面我们就通过一些基本的命令讲下git的本地仓库的结构,存储流程,数据类型,如何存储...... 仓库结构 大家都 ...

  6. JavaSE 学习笔记05丨泛型、集合

    Chapter. 10 泛型 10.1 泛型程序设计 泛型,指可以在类或方法中预支地使用未知的类型.泛型程序设计(Generic programming),意味着编写的代码可被很多不同类型的对象所重用 ...

  7. rsync单项同步

    配置rsync+inotify实时单向同步 定期同步的缺点: 执行备份的时间固定,延期明显,实时性差 当同步源长期不变化时,密集的定期任务是不必要的(浪费资源) 实时同步的优点: 一旦同步源出现变化, ...

  8. VC与VB

    VB调用VC dll的返回方式 第一种类型:数值传递注意:在VB中,默认变量传递方式为ByRef为地址,而传递值就是用ByVal,还要注意在C++中,int类型的变量是32位的,在VB中要用long型 ...

  9. LeetCode 023 Merge k Sorted Lists

    题目要求:Merge k Sorted Lists Merge k sorted linked lists and return it as one sorted list. Analyze and ...

  10. rest-framework 版本控制

    一 作用: 用于版本的控制 二 内置的版本控制类: from rest_framework.versioning import QueryParameterVersioning,AcceptHeade ...