Layui 栅格系统、常用表单和校验与监听

缺乏、安全感 2021-12-11 04:57 594阅读 0赞

### 一、栅格系统 ###

**1、栅格布局规则**

1）采用 layui-row 来定义行，如：<div class="layui-row"></div>

2）采用类似 layui-col-md\* 这样的预设类来定义一组列（column），且放在行（row）内。如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。

3）最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！

**2、布局容器**

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

也可以不固定容器宽度。将栅格或其它元素放入一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应。

**3、列间距**

通过“列间距”的预设类，来**设定列之间的间距**。且一行中最左的列不会出现左边距，最右的列不会出现右边距。

如： <div class="layui-row layui-col-space3">

**4、列偏移**

对列追加 类似 layui-col-xx-offset\* 的预设类，从而**让列向右偏移**。如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移3个列宽度。

如：<div class="layui-col-md6 layui-col-md-offset2">

**5、栅格嵌套**

在列元素（layui-col-md\*）中插入一个行元素（layui-row），即可完成嵌套。

![20190710141813564.png][]

### 二、表单 ###

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form（注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

class="layui-form layui-form-pane"  方框风格的表单,

<div class="layui-form-item" pane> 对表单元素加方格

对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格

**1、输入框**

required：注册浏览器所规定的必填字段

lay-verify：注册form模块需要验证的类型

class="layui-input"：layui.css提供的通用CSS类

layui-input-block ：一个表单元素独占一行

layui-input-inline ：一行可以放置多个表单元素

<div class="layui-container">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </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="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">辅助文字</div>
            </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>
    </div>
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>

![2019071014530280.png][]

**2、下拉选择框**

属性 lay-search 来开启搜索匹配功能

属性 selected 可设定默认项

属性 disabled 开启禁用

分组下拉选择框见官网与联动下拉选择框（通过监听可实现）

<div class="layui-form-item">
                <label class="layui-form-label" style="width: 150px;">可搜索单行选择框</label>
                <div class="layui-input-inline">
                    <select name="city" lay-search lay-verify="required" lay-filter="citySelect">
                        <option value="">请选择一个城市</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="杭州" selected>杭州</option>
                    </select>
                </div>
            </div>
    
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
            form.on('select(citySelect)', function(data){
                layer.msg(data.value);
            });
        });
    </script>

![20190710155311944.png][]

**3、单选框**

属性 title 可自定义文本

属性 disabled 开启禁用

属性 checked 设定默认项

设置 value="xxx" 可自定义值，否则选中时返回的就是默认的on

![20190710160212990.png][]

**4、复选框**

属性 title 可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）

属性 checked 可设定默认选中

属性 lay-skin 可设置复选框的风格

设置 value="1" 可自定义值，否则选中时返回的就是默认的on

![20190710160918754.png][]

**5、开关**

其实就是 checkbox 复选框的“变种”，通过设定 lay-skin="switch" 形成了开关风格

属性 checked 可设定默认开

属性 disabled 开启禁用

属性 lay-text 可自定义开关两种状态的文本

![20190710161125541.png][]

**6、文本域**

rows="2"  不起作用, 默认高度最小100px

![20190710162509640.png][]

**7、组装行内表单**

class="layui-inline"：定义外层行内

class="layui-input-inline"：定义内层行内

![20190710162557928.png][]

### 三、   [官方元素属性和监听器的使用][Link 1] ###

**元素属性**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>title</td> 
   <td>任意字符</td> 
   <td>设定元素名称，一般用于checkbox、radio框</td> 
  </tr> 
  <tr> 
   <td>lay-skin</td> 
   <td>switch（开关风格） primary（原始风格）</td> 
   <td>定义元素的风格，目前只对&nbsp;<em>checkbox</em>&nbsp;元素有效，可将其转变为开关样式</td> 
  </tr> 
  <tr> 
   <td>lay-ignore</td> 
   <td>任意字符或不设值</td> 
   <td>是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格</td> 
  </tr> 
  <tr> 
   <td>lay-filter</td> 
   <td>任意字符</td> 
   <td>事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。</td> 
  </tr> 
  <tr> 
   <td>lay-verify</td> 
   <td>required（必填项）<br> phone（手机号）<br> email（邮箱）<br> url（网址）<br> number（数字）<br> date（日期）<br> identity（身份证）<br> 自定义值</td> 
   <td>同时支持多条规则的验证，格式：<em>lay-verify="验证A|验证B"</em>&nbsp;<br> 如：<em>lay-verify="required|phone|number"</em>&nbsp;<br><br> 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。<a href="https://www.layui.com/doc/modules/form.html#verify" rel="nofollow">详见表单验证</a></td> 
  </tr> 
  <tr> 
   <td>lay-verType</td> 
   <td>tips（吸附层）<br> alert（对话框）<br> msg（默认）</td> 
   <td>用于定义异常提示层模式。</td> 
  </tr> 
  <tr> 
   <td>lay-reqText</td> 
   <td>任意字符</td> 
   <td>用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本&nbsp;<br> 注意：<em>该功能为 layui 2.5.0 新增</em></td> 
  </tr> 
  <tr> 
   <td>lay-submit</td> 
   <td>无需填写值</td> 
   <td>绑定触发提交的元素，如button</td> 
  </tr> 
 </tbody> 
</table>

**  事件监听**

<table> 
 <thead> 
  <tr> 
   <th>event</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>select</td> 
   <td>监听select下拉选择事件</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>监听checkbox复选框勾选事件</td> 
  </tr> 
  <tr> 
   <td>switch</td> 
   <td>监听checkbox复选框开关事件</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>监听radio单选框事件</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>监听表单提交事件</td> 
  </tr> 
 </tbody> 
</table>

**更新渲染， 见官网**

表单元素可能是动态插入，注意更新渲染   
     form.render(); //更新全部  
     form.render('select'); //刷新select选择框渲染

### 1、lay-verify 自定义校验规则 与 select选择框和submit监听 实例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>使用layui</title>
        <link rel="stylesheet" href="./static/layui2.5.4/css/layui.css"  type="text/css">
    </head>
    <body>
    <br/>
    <br/>
    <div class="layui-container">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required  lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" required  lay-verify="digital" placeholder="请输入6位数字" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 150px;">可搜索单行选择框</label>
                <div class="layui-input-inline">
                    <select name="city" lay-search lay-verify="required" lay-filter="citySelect">
                        <option value="">请选择一个城市</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="杭州" selected>杭州</option>
                    </select>
                </div>
            </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>
    </div>
    </body>
    <script type="text/javascript" src="./static/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="./static/layui2.5.4/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
    
            // 监听select下拉选择框被选中时触发
            form.on('select(citySelect)', function(data){
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象
                layer.msg(data.value);
            });
    
            // 表单提交时校验， 不满足，提示框，满足submit
            form.verify({
                username: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                        return '用户名不能有特殊字符';
                    }
                    if(/(^\_)|(\__)|(\_+$)/.test(value)){
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if(/^\d+\d+\d$/.test(value)){
                        return '用户名不能全为数字';
                    }
                }
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ,digital: [
                    /^\d{6}$/
                    ,'必须输入6位数字！'
                ]
            });
        });
    </script>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]     ![2019071017153886.png][]

以官方文档为准，自己敲一遍熟悉

ends ~

[20190710141813564.png]: /images/20211211/0018b4cc729640f6860b3a4077095b22.png
[2019071014530280.png]: /images/20211211/fd6cfe92f67a43fabfb13094e4dbceb6.png
[20190710155311944.png]: /images/20211211/18c8a86470f648668f4369a706d255f3.png
[20190710160212990.png]: /images/20211211/1b53ec5d162447499798bede9f0b09bc.png
[20190710160918754.png]: /images/20211211/5c4c3ff30c304277ac389d885dd20385.png
[20190710161125541.png]: /images/20211211/5ff6f5001de2491b8dfd3cb589ba195b.png
[20190710162509640.png]: /images/20211211/c6803485b9c84566882b1acb2f536d86.png
[20190710162557928.png]: /images/20211211/58ffc96f26ae4aada7934e22aab2eeb5.png
[Link 1]: https://www.layui.com/doc/modules/form.html#attr
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019071017151014.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0,size_16,color_FFFFFF,t_70
[2019071017153886.png]: /images/20211211/5561ae42af23486b93b3491386fe18c7.png