• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Layui 表单模块

Data: 2019-05-13 16:33:53Form: JournalClick: 10

# 表单模块

# 一、预设元素属性

属性名说明
title设定元素名称，用于 checkbox、radio 框
lay-skin定义元素的风格，目前只对 checkbox 元素有效
lay-ignore是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格
lay-filter事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。
lay-verify表单验证，支持多条规则的验证。
lay-verType用于定义异常提示层模式。
lay-reqText用于自定义必填项（lay-verify="required"）的提示文本
lay-submit绑定触发提交的元素，如 button

# 1、title

<div class="layui-form-item" pane>
  <label class="layui-form-label">单选框</label>
  <div class="layui-input-block">
    <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 />
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">多选框</label>
  <div class="layui-input-block">
    <input type="checkbox" name="" title="天蓬" checked />
    <input type="checkbox" name="" title="灭绝师太" />
    <input type="checkbox" name="" title="欧阳克" disabled />
  </div>
</div>

# 2、lay-skin

<div class="layui-form-item">
  <label class="layui-form-label">多选框</label>
  <div class="layui-input-block">
    <input type="checkbox" lay-skin="primary" title="天蓬" value="1" />
    <input type="checkbox" lay-skin="switch" title="灭绝师太" value="2" />
    <input type="checkbox" title="欧阳克" value="3" />
  </div>
</div>

# 3、lay-ignore

<div class="layui-form-item">
  <label class="layui-form-label">选择框</label>
  <div class="layui-input-block">
    <select lay-filter="test1" lay-ignore>
      <option value="">请选择一个老师</option>
      <option value="1">天蓬</option>
      <option value="2">灭绝师太</option>
      <option value="3">西门大官人</option>
      <option value="4">欧阳克</option>
    </select>
  </div>
</div>
<div class="layui-form-item" pane>
  <label class="layui-form-label">单选框</label>
  <div class="layui-input-block">
    <input type="radio" name="sex" value="nan" lay-ignore title="男" />
    <input type="radio" name="sex" value="nv" lay-ignore title="女" checked />
    <input type="radio" name="sex" value="" lay-ignore title="保密" disabled />
  </div>
</div>
<div class="layui-form-item" pane>
  <label class="layui-form-label">多选框</label>
  <div class="layui-input-block">
    <input lay-ignore type="checkbox" title="天蓬" value="1" />
    <input lay-ignore type="checkbox" title="灭绝师太" value="2" />
    <input lay-ignore type="checkbox" title="欧阳克" value="3" />
  </div>
</div>

# 二、事件触发

  • 语法：form.on('event(过滤器值)', callback);
event描述
select触发 select 下拉选择事件
checkbox触发 checkbox 复选框勾选事件
switch触发 checkbox 复选框开关事件
radio触发 radio 单选框事件
submit触发表单提交事件

# 1、select 触发下拉选择事件

  • elem 得到 select 原始 DOM 对象
  • value 得到被选中的值
  • othis 得到美化后的 DOM 对象
<script>
    layui.use('form', function(){
        var form = layui.form;
        form.on("select(test)", function (data) {
          console.log(data);
        });
    });
</script>
  • lay-filter="" 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的
<div class="layui-form-item">
  <label class="layui-form-label">选择框</label>
  <div class="layui-input-block">
    <select lay-filter="test1">
      <option value="">请选择一个老师</option>
      <option value="1">天蓬</option>
      <option value="2">灭绝师太</option>
      <option value="3">西门大官人</option>
      <option value="4">欧阳克</option>
    </select>
  </div>
</div>

# 2、checkbox 触发复选框勾选事件

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

<div class="layui-form-item" pane>
  <label class="layui-form-label">多选框</label>
  <div class="layui-input-block">
    <input type="checkbox" lay-filter="test2" title="天蓬" value="1" />
    <input type="checkbox" lay-filter="test2" title="灭绝师太" value="2" />
    <input type="checkbox" lay-filter="test2" title="欧阳克" value="3" />
  </div>
</div>

# 3、switch 触发复选框开关事件

  • elem 得到 checkbox 原始 DOM 对象
  • elem.checked 开关是否被选中，true 或者 false
  • value 复选框 value 值，也可以通过 elem.value 得到
  • othis 得到美化后的 DOM 对象
<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("switch(test3)", function (data) {
      console.log(data);
    });
  });
</script>

<div class="layui-form-item" pane>
  <label class="layui-form-label">开关</label>
  <div class="layui-input-block">
    <input type="checkbox" lay-filter="test3" lay-skin="switch" />
  </div>
</div>

# 4、radio 触发单选框事件

  • elem 得到 radio 原始 DOM 对象
  • value 被点击的 radio 的 value 值
<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("radio(test4)", function (data) {
      console.log(data);
    });
  });
</script>

<div class="layui-form-item" pane>
  <label class="layui-form-label">单选框</label>
  <div class="layui-input-block">
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="1"
      title="欧阳克"
    />
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="2"
      title="灭绝师太"
    />
    <input
      type="radio"
      name="test4"
      lay-filter="test4"
      value="3"
      title="西门大官人"
    />
  </div>
</div>

# 5、submit 触发表单提交事件

  • elem 被执行事件的元素 DOM 对象，一般为 button 对象
  • form 被执行提交的 form 对象，一般在存在 form 标签时才会返回
  • field 当前容器的全部表单字段，名值对形式：{name: value}
<script>
  layui.use("form", function () {
    var form = layui.form;
    form.on("submit(submit)", function (data) {
      console.log(data);
    });
  });
</script>
  • lay-submit 绑定触发提交的元素
<button type="button" class="layui-btn" lay-submit lay-filter="submit">
  提交
</button>

# 三、表

journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>