主要的结构

先导入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. 深度分析：面试腾讯，阿里面试官都喜欢问的String源码，看完你学会了吗？

    前言 最近花了两天时间,整理了一下String的源码.这个整理并不全面但是也涵盖了大部分Spring源码中的方法.后续如果有时间还会将剩余的未整理的方法更新到这篇文章中.方便以后的复习和面试使用.如果 ...

  2. 如何用MathType 7输入x的一阶导数

    物理学.几何学.经济学等学科中的一些重要概念都可以用导数来表示.如,导数可以表示运动物体的瞬时速度和加速度.可以表示曲线在一点的斜率.还可以表示经济学中的边际和弹性.那么作为专业的公式编辑器,如何输入 ...

  3. jQuery 第五章 实例方法 详解动画之animate()方法

    .animate()   .stop()   .finish() ------------------------------------------------------------------- ...

  4. synchronized关键字的可重入性

    /**父类*/public class SynchronizedDemo1 implements Runnable { @Override public void run() { try { meth ...

  5. 企业级LINUX自动化运维工具Ansible实战课程下载

    什么是Ansible? Ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量 ...

  6. apply 、call 以及 bind 的使用和区别

    一.被apply和call调用的函数中没有传递参数 (一)不传参数 结果: (二)传递 null 结果: 总结: 1.当使用 apply和 call去调用函数并且没有传递参数时,前提这个函数中也没有传 ...

  7. gulp常用配置

    由于项目中经常会使用到gulp,而每次配置大概都差不多,所以将配置记录一下 项目结构 ├─dist │ ├─assets │ ├─css │ ├─images │ └─js ├─node_module ...

  8. centos7安装Python的虚拟环境

    1. 安装virtualenv.virtualenvwrapper # pip3 install virtualenv # pip3 install virtualenvwrapper 2. 进入.b ...

  9. Jmeter测试Websocket接口

    前言 websocket是什么? WebSocket 协议在2008年诞生,2011年成为国际标准.所有浏览器都已经支持了. 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器 ...

  10. 一条 sql 的执行过程详解

    写操作执行过程 如果这条sql是写操作(insert.update.delete),那么大致的过程如下,其中引擎层是属于 InnoDB 存储引擎的,因为InnoDB 是默认的存储引擎,也是主流的,所以 ...