Layui快速入门之第十节表单

最新推荐文章于 2024-07-25 21:45:55 发布

渊婉

最新推荐文章于 2024-07-25 21:45:55 发布

阅读量2.3k

点赞数 2

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132895639

版权

本文详细介绍了Layui的表单组件，包括输入框、复选框、单选框、选择框及其相关操作，如动态点缀、验证规则、事件处理等，是前端开发者学习Layui表单使用的实用教程。

摘要由CSDN通过智能技术生成

一：基本用法

表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一

表单需要依赖与form模块的加载，在容器中设定class="layui-form"来标识一个表单元素模块，基本的行区块结构，它提供了响应式的支持，可以换成其他结构，但必须在外层容器中定义class="layui-form"，form模块才能正常工作

<form class="layui-form" action="">
</form>
<script>
layui.use('form', function(){
    var form = layui.form;
});
</script>

二：输入框

输入框组件是对文本框<input type="text">和多行文本框<textarea>元素的扩展

普通输入框

<div class="layui-form">
  <input type="text" name="" placeholder="文本框" class="layui-input">
  <hr class="ws-space-16">
  <textarea name="" placeholder="多行文本框" class="layui-textarea"></textarea>
</div>

输入框点缀

输入框点缀是指给普通输入框附加其他元素来进行动静态修饰，其结构包含：容器、前缀、输入框、后缀

<div class="layui-input-{容器类}">
  <div class="layui-input-{前缀类}"></div>
  <input class="layui-input" placeholder="输入框">
  <div class="layui-input-{后缀类}"></div>
</div>

容器类：
- 前置和后置结构：class="layui-input-group"
- 前缀和后缀结构：class="layui-input-wrap"
前缀类：class="layui-input-prefix"
后缀类：class="layui-input-suffix"
前缀显示分隔框：class="layui-input-prefix layui-input-split"
后缀显示分隔框：class="layui-input-suffix layui-input-split"

通过在不同层级中设置规定的 CSS 类来实现点缀布局，再按照不同需求，在前缀和后缀中放置图标等任意内容

前置和后置

前置和后置结构是输入框的自适应结构，可以很灵活地控制前后置内容与输入框的宽度比例

结构：

<div class="layui-input-group">
  <div class="layui-input-prefix">前置内容</div>
  <input type="text" class="layui-input">
  <div class="layui-input-suffix">后缀内容</div>
</div>

示例：

<div class="layui-form">
  <div class="layui-form-item">    
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        手机号
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-suffix">
        <button class="layui-btn layui-btn-primary">一个按钮</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-split layui-input-prefix">
        用户名
      </div>
      <input type="text" placeholder="带任意前置内容" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带任意后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        搜索
      </div>
      <input type="text" placeholder="带任意前置和后置内容" class="layui-input">
      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
        <i class="layui-icon layui-icon-search"></i>
      </div>
    </div>
  </div>
  <hr style="margin: 32px 0;">
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        身高
      </div>
      <input type="text" placeholder="前置和后置无分割框" class="layui-input">
      <div class="layui-input-suffix">
        cm
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <div class="layui-input-prefix">
        昵称
      </div>
      <input type="text" placeholder="带前置且无分割框" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-group">
      <input type="text" placeholder="带后置且无分割框" class="layui-input">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-tips"></i> 任意后置内容
      </div>
    </div>
  </div>
</div>

前缀和后缀

输入框前缀和后缀是输入框的纯修饰结构，前缀和后缀宽度固定且其元素不可触及，即只能触及输入框本身

结构：

<div class="layui-input-wrap">
  <div class="layui-input-prefix">前缀图标</div>
  <input type="text" class="layui-input">
  <div class="layui-input-suffix">后缀图标</div>
</div>

示例：

<div class="layui-form">
  <div class="layui-row layui-col-space16">
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" placeholder="带前缀" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" placeholder="带前缀加分隔框" class="layui-input">
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <input type="text" placeholder="带后缀加分隔框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" placeholder="带前缀和后缀加分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-down"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀无分割框和后缀有分割框" class="layui-input">
        <div class="layui-input-suffix layui-input-split">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix layui-input-split">
          <i class="layui-icon layui-icon-location"></i>
        </div>
        <input type="text" placeholder="带前缀有分割框和后缀无分割框" class="layui-input">
        <div class="layui-input-suffix">
          <i class="layui-icon layui-icon-edit"></i>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-form"></i>
        </div>
        <select>
          <option value="">放置 select 元素</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
        </select>
      </div>
    </div>
  </div>
</div>

动态点缀

该功能允许对输入框内容进行相关动态操作。通过对输入框元素设置 lay-affix 属性来开启动态点缀，且输入框元素必须放置在一个具有输入框点缀结构的容器中。如：

input 放在前后置容器中：
<div class="layui-input-group">
  <input type="text" lay-affix="clear">
</div>
 
input 放在前后缀容器中：
<div class="layui-input-wrap">
  <input type="text" lay-affix="clear">
</div>

lay-affix 属性支持设置内置属性值和自定义值

值	描述
`lay-affix="eye"`	密码框显隐
`lay-affix="clear"`	内容清除
`lay-affix="自定义图标值"`	值对应图标类`layui-icon-`后面的名称（#详见图标列表）。可通过「点缀事件」完成自定义操作

密码显隐

<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="password" lay-affix="eye" placeholder="请输入" class="layui-input">
  </div>
</div>

内容清除

<div class="layui-form">
  <div class="layui-input-wrap">
    <input type="text" lay-affix="clear" placeholder="请输入" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="text" value="默认有值状态" lay-affix="clear" class="layui-input">
  </div>
  <hr class="ws-space-16">
  <div class="layui-input-wrap">
    <input type="tex