lay

layui之表单

由 纵然是瞬间 提交于 2019-12-06 10:23:13
1.使用 layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上 class="layui-form" ，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui.form小例子</title> <link rel="stylesheet" href="layui.css" media="all"> </head> <body> <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 --> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> </div>

LayUI笔记

由 谁说我不能喝 提交于 2019-12-05 18:10:39
LayUI  经典模块化前端框架,低门槛开箱即用的前端 UI 解决方案.   其他UI框架：     Bootstrap，Element， EasyUI，LayUI 等等 LayUI使用  Layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。   1. 官网首页下载 https://www.layui.com/   2. 引入layui核心文件： layui/css/layui.css // layui中内置的样式 layui/layui.js // layui中核心的js插件(模块化使用) layui/layui.all.js // layui中所有的js   3. layui的目录介绍:    layui     ├─css //css目录     │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）     │ │ ├─laydate     │ │ ├─layer     │ │ └─layim     │ ├─layui.css //核心样式文件     │ └─layui.mobile.css //移动端CCSS样式     ├─font //字体图标目录（内置字体）     ├─images //图片资源目录

使用 layUI做一些简单的表单验证

由 廉价感情. 提交于 2019-12-04 14:28:24
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > 　　<input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" > 　　<hr class="hr15"> 　　<input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"> 　　<hr class="hr15"> 　　<input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit"> 　　<hr class="hr20" > </form> <script> $(function () { layui.use('form', function(){ var form = layui.form; form.on('submit(login)', function(data){ layer.msg(JSON.stringify(data.field),function(){ console.log(

Layui二级联动和多级联动

由 匿名 (未验证) 提交于 2019-12-03 00:01:01
一、筛选框代码 <form class = "layui-form" action = "" > <label class = "layui-form-label" > 公司： </label> <div class = "layui-inline" > <select name = "companyId" lay-verify = "required" lay-filter = "companyId" id = "companyId" lay-search > <option value = "" > 请选择公司 </option> </select> </div> 部门: <div class = "layui-inline" > <select name = "departmentId" lay-verify = "required" lay-filter = "departmentId" id = "departmentId" lay-search > <option value = "" > 请选择部门 </option> </select> </div> 二级部门: <div class = "layui-inline" > <select name = "departmentSecondId" lay-verify = "required" lay-filter =

首页

由 匿名 (未验证) 提交于 2019-12-02 23:59:01
左侧导航栏 修改密码 退出 <!DOCTYPE html> <html> <head> <meta charset = "utf-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" > <title> 小区物业管理系统 </title> <!--<meta name="renderer" content="webkit">--> <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" > <link rel = "shortcut icon" href = "../layuiadmin/layui/images/favicon.ico" /> <link rel = "stylesheet" href = "../layuiadmin/layui/css/layui.css" media = "all" >

layui hint laydate timeout 超时 laydate无法使用

由 匿名 (未验证) 提交于 2019-12-02 23:26:52
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41413619/article/details/88679923 Layui hint : http : //localhost:8080/X-admin/lib/layui/css/modules/laydate/default/laydate.css?v=5.0.9 timeout 错误信息如 上图 网上百度了半天都没有解决方法 后来自己的搞了一个多小时 报超时就说明加载中出了问题， 所以那么就给他一个正确的路径就可以了 路径如下： <link rel="stylesheet" href="./lib/layui/css/modules/laydate/default/laydate.css"> 完美解决 亲测有效 转载请标明出处: layui hint laydate timeout 超时 laydate无法使用 文章来源: https://blog.csdn.net/qq_41413619/article/details/88679923

layui select动态回显数据

由 蓝咒 提交于 2019-12-02 04:42:09
新手上道，请多指教，有各种不足可以提出！ 以为最近刚写的一个项目为例 先看html lay-verify 是表单验证的 有很多种 required (必填项) phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity(身份证) 自定义值 同时支持多条规则的验证： 格式：lay-verify=”验证A|验证B” 如：lay-verify=”required|phone|number 步入正题 以下是JS 是不是简单实用 切记 $("#DepattmentBelove").val(sp); 可以直接用选择器赋值 有的人会问 你这个obj哪里传来的值 嘿嘿 因为layui带着监听事件 可以直接在渲染的列表显示上直接打过来上面的值 所以直接接收叫好了 以上就是动态的select绑定 对啦 form.render（） 手动渲染一定要记着加上，不渲染会导致显示不出来的问题。 死值就更好说了，因为可以直接把值拿过来 而且layui自带回显数据 也就是 html JS 每天记住一点点。 天行健，君子以自强不息。 来源： https://www.cnblogs.com/fgh-rbb/p/11730184.html

layui表单验证 只能是整数

由 戏子无情 提交于 2019-12-01 11:44:57
大部分的layui验证在我另一个博客页面 https://www.cnblogs.com/a973692898/p/11577502.html 这次的是只能输入整数，之前写了一个lay-verify=”required|number”，发现在实际运用中，写小数的，会出现错误信息；换成double也不成 后来就用了js辅助，看代码： <input name="operatorId" lay-verify="suanziId" class="layui-input" type="text"> 额。。。我这个命名可能不怎么规范哈， 上边代码中加下划线的是重点哈； //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } ,suanziId: [ /^[1-9]\d*$/ ,'只能是整数哦' ] ,content: function(value){ layedit.sync(editIndex); } }); 这样就可以限制只能是数字了，其他的限制也可以使用这中方式。只需要不同的正则表达式即可 来源： https://www.cnblogs

Layui 监听 复选框 提交表单

由 此生再无相见时 提交于 2019-11-29 22:12:06
表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Layui 监听 复选框 提价表单</title> <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/> </head> <body> <form class="layui-form p-3" autocomplete="off" οnsubmit="return false"> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-inline"> <input type="text" name="number" value="0,1,3,4,5,6," disabled> <input type="checkbox" lay-filter="number" lay-skin="primary" value="0" title="0"> <input type=
订阅 lay