Layui

Layui（谐音：类UI) 是一款由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案。遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常适合界面的快速开发。兼容除 IE6/7 之前的的全部浏览器，可作为 PC 端后台系统与前台界面的速成开发方案。

官网：https://www.layui.com，已下架，目前可以通过其它网站获取曾经的文档。

下载与使用

1、官网首页下载

在 Layui官网首页 下载 layui 的最新版，它经过了自动化构建，更适合用于生产环境。目录结构如下：

   ├─css //css目录
  │  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）
  │  │  ├─laydate
  │  │  └─layer
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  └─layui.js //核心库

2、在页面引入下述两个文件：

./layui/css/layui.css
./layui/layui.js

3、在 body 元素中添加要使用的组件内容即可。

页面元素

CSS内置公共基础类

容器类

文本类

背景色类

辅助类

HTML内置公共属性

很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要设定 Layui 所支持的自定义属性来作为区分。

主要记忆 lay-filter 属性。此属性为 layui 自定义的事件过滤器属性。我们会在很多地方看到它，你可以把它看作是一个ID选择器。

简单组件

栅格化布局组件

原理：将容器宽等分成12份，预定义好在不同屏幕尺寸下对应宽度的样式类，给元素添加上类名即可呈现效果。

上方的 1-12 表示占据容器宽的比例，例如：希望一个元素在大屏幕尺寸中占据父容器的一半，就添加类名：.layui-col-lg6

可以通过给父容器追加类名 .layui-col-space1-30 给子元素添加内边距，从而实现子元素内容间隔，即 — 列间隔

可以通过给子元素添加类名 .layui-col-offset1-12 来添加列偏移

图标

Layui 提供了图标库，我们可以直接从图标库中选取要使用的字体图标加载到页面中。使用方式有两种：

1、使用 unicode 字符定义图标

<i class="layui-icon">&#xe60c;</i> 

2、使用 font-class 的形式定义图标，这种方式从 Layui 2.3.0 版本之后开始支持

<i class="layui-icon layui-icon-face-smile"></i>

按钮

向任意HTML元素设定class=”layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type} 的类名来定义其它按钮风格。内置的按钮类名可以进行任意组合，从而形成更多种按钮风格。

<button class="layui-btn">一个标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>

主题类名

尺寸类名

圆角

通过添加 layui-btn-radius 类名可以将一个Layui按钮改成一个圆角风格的按钮

图标按钮

在按钮中间添加图标内容，添加的图标可以从官方文档中查看图标库。

<button type="button" class="layui-btn">
  <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
  <i class="layui-icon layui-icon-wifi"></i> wifi
</button>

按钮组

将按钮放入一个class=”layui-btn-group”元素中，即可形成按钮组，按钮本身仍然可以随意搭配：

<div class="layui-btn-group">
  <button class="layui-btn">增加</button>
  <button class="layui-btn">编辑</button>
  <button class="layui-btn">删除</button>
</div>

按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器：

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按钮一</button> 
  <button type="button" class="layui-btn">按钮二</button> 
  <button type="button" class="layui-btn">按钮三</button> 
</div>

导航

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。

Layui 导航组件需借助 element JS模块才能使用。加载模块的方法

水平导航

<ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item"><a href="">最新活动</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

设定 layui-this 来指向当前页面的分类。

导航主题

通过对导航追加CSS背景类，可以让导航呈现不同的主题色，例如：

<ul class="layui-nav layui-bg-green">
    ...
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

垂直/侧边导航

垂直导航需要追加类名：layui-nav-tree
侧边导航需要追加类名：layui-nav-tree layui-nav-side

导航可选属性

对导航元素结构设定可选属性，可让导航菜单项达到不同效果。目前支持的属性如下：

面包屑

<span class="layui-breadcrumb">
    <a href="">首页</a>
    <a href="">国际新闻</a>
    <a href="">亚太地区</a>
    <a><cite>正文</cite></a>
</span>

我们可以通过设置属性 lay-separator=”-“ 来自定义分隔符。

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首页</a>
  <a href="">国际新闻</a>
  <a href="">亚太地区</a>
  <a><cite>正文</cite></a>
</span>

选项卡

Tab广泛应用于Web页面，Layui内置多种Tab风格，支持新增、删除、切换选项卡、并提供响应式支持。动态操作依赖于 element 模块。

默认Tab选项卡

<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

风格切换

添加 layui-tab-brief 类可以显示简约风格

添加 layui-tab-card 类可以显示卡片风格

Tab响应式

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标。

待删除的Tab

可以对父层容器设置属性 lay-allowClose=”true” 来允许Tab选项卡被删除

ID焦点定位

可以通过对选项卡设置属性 lay-id=”xxx” 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。

通过动态操作 element.tabChange("lay-tab-filter"，layid) 让选项卡切换到对应项。

Layui 模块

模块化的加载方式是在 layui版本 < 2.6.0时使用的，之后便不再使用该方式。

layui 的模块是基于 layui.js 内部实现的异步模块加载方式。layui 的模块接口会绑定在 layui 对象下，内部由 layui.define() 方法来完成。每一个模块都会有一个特有的名字，并且无法被占用。

调用模块可通过 layui.use 方法来实现，然后再通过 layui 对象获得模块接口。

语法：layui.use(mods, callback)

// 如果只调用一个模块，第一个参数写上模块名即可
layui.use("laypage", function(){
    var laypage = layui.laypage;
    // 使用模块
})

// 如果需要使用多个模块，第一个参数需要使用数组形式
layui.use(['layer', 'laypage', 'laydate'], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块

  //使用模块
}); 

事实上 layui 的「模块化加载」十分适用于开发环境，它方便团队开发和代码调试。但对于「线上环境」，更推荐采用「全模块加载」，即直接引入 layui.all.js，它包含了 layui 所有的内置模块，且无需再通过 layui.use() 方法加载模块，直接调用即可。如：

<script src="../layui/layui.all.js"></script>  
<script>

    //无需再执行layui.use()方法加载模块，直接使用即可
    var form = layui.form
    ,layer = layui.layer;

    //…
</script>

element 模块

基础方法：

更新渲染

此模块的相关内容不会对动态生成的页面内容生效，如果需要使用相应API，必须手工执行 element.init(type,filter) 方法。在 Layui 2.1.6 版本之后，可以用 element.render(type,filter) 方法替代。

第一个参数 type 可选，默认对全部类型的元素进行一次更新。可局部刷新的type如下表：

例如：

element.init(); //更新全部 2.1.6之后使用 element.render()
element.render("nav"); // 仅对导航进行渲染

第二个参数 filter，为元素的 lay-filter=”” 的值，可以借助该参数，完成指定元素的局部更新。

【HTML】
<div class="layui-nav" lay-filter="test1">
  …
</div>

<div class="layui-nav" lay-filter="test2">
  …
</div>

【JavaScript】
//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
//……      

事件监听

语法：element.on(‘event(过滤器值)’, callback);

element 模块在 layui 事件机制中注册了element 模块事件，所以当你使用 layui.onevent() 自定义模块事件时，请勿占用 element 名。目前 element 模块所支持的事件如下表：

默认情况下，事件所监听的是全部的元素，但如果你只想监听某一个元素，使用事件过滤器即可。
如：<div class="layui-tab" lay-filter="test"></div>

// 监听页面上所有tab元素的切换事件
element.on("tab", function(data){
    console.log(data);
})
// 仅监听测试 lay-filter=test 的元素的切换事件
element.on('tab(test)', function(data){
    console.log(data);
});

Tab相关事件回调函数的参数对象包含：

• index：当前点击的Tab对应的下标
• elem：当前Tab容器对象

Nav事件回调函数的参数为当前点击的DOM对象；

折叠面板事件回调函数中携带参数为：

• show：当前面板的展开状态
• title：当前点击面板的标题区域DOM对象
• content：当前点击面板的内容区域的DOM对象

动态操作进度条

语法：element.progress(filter, percent)

示例：

<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
    <div class="layui-progress-bar" lay-percent="0%"></div>
</div>

上述是一个已经设置了过滤器（lay-filter=”demo”）的进度条，现在你只需要在某个事件或者语句中执行方法：element.progress(‘demo’, ‘50%’)；即可改变进度

表格

基础表格

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>昵称</th>
            <th>加入时间</th>
            <th>签名</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>贤心</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行</td>
        </tr>
        <tr>
            <td>许闲心</td>
            <td>2016-11-28</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
        </tr>
    </tbody>
</table>

给 table 标签设定不同的基础属性，会呈现不同的效果：

数据表格

依赖模块 table。这里主要介绍方法渲染：首先在页面防止一个空表格元素 *

备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：表格重载

表头参数一览表

异步数据参数一览表

注意：request 和 response 参数均为 layui 2.1.0 版本新增

调用示例：

//“方法级渲染”配置方式
table.render({ //其它参数在此省略
    url: '/api/data/'
    /*
    where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
    method: 'post' //如果无需自定义HTTP类型，可不加该参数
    request: {
        pageName: "请求分页的参数字段名，默认为 page",
        limitName: "请求每页数量的参数字段名，默认为 limit"
    } //如果无需自定义请求参数，可不加该参数
    response: {
        statusName: "状态码的字段名，默认code", 
        statusCode: 表示数据请求成功的状态码，默认0, 
        msgName: "表示请求信息的字段名，默认为空", 
        countName: "表示数据总条数的字段名，默认为count", 
        dataName: "数据列表的字段名，默认为data" 
        } //如果无需自定义数据响应名称，可不加该参数
    */
}); 

高度参数设置

类型：Number/String，可选值如下：

done回调

类型：Function，默认值：无

无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。

table.render({ //其它参数在此省略
    done: function(res, curr, count){
        //如果是异步请求数据方式，res即为你接口返回的信息。
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
        console.log(res);

        //得到当前页码
        console.log(curr); 

        //得到数据总量
        console.log(count);
    }
});

表格基础方法

获取选中行

语法：table.checkStatus(‘ID’)，其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID）

var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值

console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

删除/修改行

在行事件中通过事件处理函数的形参对象的 del、update 方法实现，下方行事件中有介绍。

表格事件监听

语法：table.on(‘event(filter)’, callback); 注：event为内置事件名，filter为容器lay-filter设定的值。默认情况下，事件所监听的是全部的table模块容器，但如果你只想监听某一个容器，使用事件过滤器即可。
table模块在Layui事件机制中注册了专属事件，如果你使用layui.onevent()自定义模块事件，请勿占用table名。

监听复选框选择

点击复选框时触发，回调函数返回一个object参数，携带的成员如下：

table.on('checkbox(test)', function(obj){
    console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
    console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

监听单元格编辑

单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
    console.log(obj.value); //得到修改后的值
    console.log(obj.field); //当前编辑的字段名
    console.log(obj.data); //所在行的所有相关数据  
});

监听行单双击事件

点击或双击行时触发。该事件为 layui 2.4.0 开始新增

//监听行单击事件
table.on('row(test)', function(obj){
    console.log(obj.tr) //得到当前行元素对象
    console.log(obj.data) //得到当前行数据
    //obj.del(); //删除当前行
    //obj.update(fields) //修改当前行数据
});

//监听行双击事件
table.on('rowDouble(test)', function(obj){
    //obj 同上
});

监听行工具事件

table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

    if(layEvent === 'detail'){ //查看
        //do somehing
    } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
        });
    } else if(layEvent === 'edit'){ //编辑
        //do something

        //同步更新缓存对应的值
        obj.update({
            username: '123'
            ,title: 'xxx'
        });
    } else if(layEvent === 'LAYTABLE_TIPS'){
        layer.alert('Hi，头部工具栏扩展的右侧图标。');
    }
});

表格重载

layer 弹窗

依赖模块 layer。由于弹窗模块过于出色，所以 Layui 至今仍将她作为独立组件来维护。

核心方法

语法：layer.open(options)。这基本上是露脸率最高的方法，不管是使用哪种快捷方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引。

options 即是基础参数：

便捷方法

普通信息框

语法：layer.alert(content, options, yes)

一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。如：

//eg1
layer.alert('只想简单的提示');        
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
    //do something

    layer.close(index);
}); 

询问框

语法：layer.confirm(content, options, yes, cancel)

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
    //do something

    layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
    //do something

    layer.close(index);
});     

提示框

语法：layer.msg(content, options, end)

露脸率最高的提示框，不仅占据很少的面积，而且默认还会3秒自动消失。

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6}); 
//eg3
layer.msg('关闭后想做些什么', function(){
    //do something
}); 
//eg
layer.msg('同上', {
    icon: 1,
    time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
    //do something
});   

加载框

语法：layer.load(icon, options)

type:3 的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，你还有选择空间。icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 
//关闭
layer.close(index); 

吸附层

语法：layer.tips(content, follow, options)

type:4的深度定制。

//eg1
layer.tips('只想提示地精准些', '#id');
//eg 2
$('#id').on('click', function(){
    var that = this;
    layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
});
//eg 3
layer.tips('在上面', '#id', {
    tips: 1
});

输入层

语法：layer.prompt(options, yes)

prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes携带value 表单值 index 索引 elem 表单元素

//prompt层新定制的成员如下
{
    formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
    value: '', //初始时的值，默认空字符
    maxlength: 140, //可输入文本的最大长度，默认500
}

//例子1
layer.prompt(function(value, index, elem){
   alert(value); //得到value
   layer.close(index);
});

//例子2
layer.prompt({
    formType: 2,
    value: '初始值',
    title: '请输入值',
    area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
    alert(value); //得到value
    layer.close(index);
});

Tab层

语法：layer.tab(options)

tab层只单独定制了一个成员，即tab: []，这个好像没有什么可介绍的，简单粗暴看例子

layer.tab({
    area: ['600px', '300px'],
    tab: [{
        title: 'TAB1', 
        content: '内容1'
    }, {
        title: 'TAB2', 
        content: '内容2'
    }, {
        title: 'TAB3', 
        content: '内容3'
    }]
}); 

相册层

语法：layer.photos(options)

相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入，如下：

$.getJSON('/jquery/layer/test/photos.json', function(json){
    layer.photos({
        photos: json
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    });
}); 

//而返回的json需严格按照如下格式：
{
    "title": "", //相册标题
    "id": 123, //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [   //相册包含的图片，数组格式
        {
            "alt": "图片名",
            "pid": 666, //图片id
            "src": "", //原图地址
            "thumb": "" //缩略图地址
        }
    ]
}

如果是直接从页面中获取图片，那么需要指向图片的父容器，并且你的img可以设定一些规定的属性（但不是必须的）。

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
    <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
    <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>

<script>
    //调用示例
    layer.photos({
        photos: '#layer-photos-demo'
        ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
    }); 
</script>

另外，photos还有个tab回调，切换图片时触发。

layer.photos({
    photos: json/选择器,
    tab: function(pic, layero){
        console.log(pic) //当前图片的一些信息
    }
});

弹窗关闭的方法

语法：layer.close(index)

每一个 layer 的弹出层都会返回一个标识 index，将其传入这个方法即可实现关闭该弹出层。

如果你想关闭最新弹出的层，直接获取 layer.index 即可。它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的。

语法：layer.closeAll()

如果希望一次性清空页面上所有的弹出层，可以使用这个方法。

如果你只想关闭某个类型的层，那么你可以：layer.closeAll('page'); 关闭所有页面层

表单

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

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

表单元素

通过给容器设定 class=”layui-form” 来标识一个 Layui 表单元素，可以使用 Layui 的 form 模块提供的API。

<form class="layui-form">
    使用form标签，需要注意在提交事件中组织表单的默认提交动作
</form>

<div class="layui-form">
    使用div标签，不需要在提交事件中阻止默认事件
</div>

表单内部常用类：

输入框

<input type="text" name="title" required placeholder="请输入标题" autocomplete="off" class="layui-input"> 

• required：注册浏览器所规定的必填字段
• class=”layui-input”：layui.css提供的通用CSS类

下拉框

<select name="city">
    <option value="">请选择一个城市</option>
    <option value="010">北京</option>
    <option value="021">上海</option>
    <option value="0571">杭州</option>
</select>    

属性selected可设定默认项，属性disabled开启禁用，select和option标签都支持

<select name="city">
    <option value="010">北京</option>
    <option value="021" disabled>上海（禁用效果）</option>
    <option value="0571" selected>杭州</option>
</select>  

通过 optgroup 标签给select分组：

<select name="quiz">
    <option value="">请选择</option>
    <optgroup label="城市记忆">
        <option value="你工作的第一个城市">你工作的第一个城市？</option>
    </optgroup>
    <optgroup label="学生时代">
        <option value="你的工号">你的工号？</option>
        <option value="你最喜欢的老师">你最喜欢的老师？</option>
    </optgroup>
</select>

通过设定属性 lay-search 来开启搜索匹配功能：

<select name="city" lay-search>
    <option value="010">layer</option>
    <option value="021">form</option>
    <option value="0571" selected>layim</option>
    ……
</select>

复选框

<input type="checkbox" name="" title="写作" checked>

• 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
• 属性checked 可设定默认选中
• 属性 disabled 可设定禁用
• 属性lay-skin 可设置复选框的原始风格
  • primary 原始风格
  • switch 开关风格。通过设定属性 lay-text 定义开关两种状态的文本，用 “|” 隔开
• 设置value=”1” 可自定义值，否则选中时返回的就是默认的on

单选框

<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

• 属性title 可自定义文本
• 属性disabled 开启禁用
• 设置value=”xxx” 可自定义值，否则选中时返回的就是默认的on

文本域

<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>

class=”layui-textarea”：layui.css提供的通用CSS类

表单方框风格

通过给表单容器元素追加 layui-form-pane 的class，来设定表单的方框风格。需要注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：

<form class="layui-form layui-form-pane" action="">
    内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
    <div class="layui-form-item" pane>
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男">
            <input type="radio" name="sex" value="女" title="女" checked>
        </div>
    </div>
</form>

忽略美化渲染

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

表单的预设元素属性

预设元素属性可以使得一些交互操作交由form模块内部、或者开发者来借助form提供的JS接口精确控制。目前Layui可支持的属性如下表所示：

表单事件

更新渲染

当表单的选择元素是动态插入的时候，需要执行 form.render(type, filter) 方法让其生效。第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

第二个参数：filter，为 class=”layui-form” 所在元素的 lay-filter=”” 的值。你可以借助该参数，对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">
  …
</div>

<div class="layui-form" lay-filter="test2">
  …
</div>

【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……

事件监听

语法：form.on('event(过滤器值)', callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

默认情况下，事件所监听的是全部的form模块元素，但如果你只想监听某一个元素，使用事件过滤器即可。下方为具体监听事件的示例。

监听select选择

下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：

form.on('select(filter)', function(data){
    console.log(data.elem); //得到select原始DOM对象
    console.log(data.value); //得到被选中的值
    console.log(data.othis); //得到美化后的DOM对象
});

请注意：如果你想监听所有的select，去掉过滤器(filter)即可。下面将不再对此进行备注。

监听checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：

form.on('checkbox(filter)', function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中，true或者false
    console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
});   

监听switch开关

开关被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('switch(filter)', function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //开关是否开启，true或者false
    console.log(data.value); //开关value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
}); 

监听radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('radio(filter)', function(data){
    console.log(data.elem); //得到radio原始DOM对象
    console.log(data.value); //被点击的radio的value值
}); 

监听提交事件

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：

form.on('submit(*)', function(data){
    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

再次温馨提示：上述的submit(\)*中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

<button lay-submit lay-filter="*">提交</button>           

你可以把 * 号换成任意的值，如：lay-filter=”go”，但监听事件时也要改成 form.on(‘submit(go)’, callback);

表单赋值/取值

语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。
注：其中「取值」功能为 layui 2.5.5 开始新增

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
    "username": "贤心" // "name": "value"
    ,"sex": "女"
    ,"auth": 3
    ,"check[write]": true
    ,"open": false
    ,"desc": "我爱layui"
});

//获取表单区域所有值
var data1 = form.val("formTest");

第二个参数中的键值是表单元素对应的 name 和 value。

表单验证

Layui 对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 lay-verify=”” 属性值即可。

例：

<input type="text" lay-verify="email"> 

还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

除了内置的校验规则外，开发者还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。

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 '用户名不能全为数字';
        }

        //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
        if(value === 'xxx'){
            alert('用户名不能为敏感词');
            return true;
        }
    }

    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
    ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
    ] 
});  

当我们自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">