layui问题汇总_layui form filter exclude-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43721000/article/details/105929949

本文详细介绍了layui框架中的表单组件使用方法，包括输入框、密码框、下拉选择框、复选框、开关、单选框和文本域等元素的配置及交互，展示了如何通过JS监听提交、表单赋值和取值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题索引：

html:

<form class="layui-form" action="" lay-filter="example">
<!-- ------------------------------------------ -->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
    </div>
  </div>
<!-- ------------------------------------------ -->
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
<!-- ------------------------------------------ -->
  <div class="layui-form-item">
    <label class="layui-form-label">下拉选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</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">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
<!-- ------------------------------------------ -->  
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
 <!-- ------------------------------------------ --> 
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
<!-- ------------------------------------------ -->
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
<!-- ------------------------------------------ -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
      <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

js:

layui.use(['form', ], function(){
  var form = layui.form
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
  //表单赋值
  layui.$('#LAY-component-form-setval').on('click', function(){
    form.val('example', {
      "username": "贤心" // "name": "value"
      ,"password": "123456"
      ,"interest": 1
      ,"like[write]": true //复选框选中状态
      ,"close": true //开关状态
      ,"sex": "女"
      ,"desc": "我爱 layui"
    });
  });
  
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  
});

解释：

class=“layui-form” 是必须类，否则无法监听提交
2.lay-filter=“example” 相当于表单过滤体条件，如果有两个以上的表单，建议增加 lay-filter ，让表单可以分开取值，example可以为任意值（取值方法 var data = form.val(‘example’);）。
3.lay-submit="" 是必须属性，此属性放到提交按钮里即可，当点击提交时使用此方法监听form.on(‘submit(demo1)’, function(data){
layer.alert(JSON.stringify(data.field), {
title: ‘最终的提交信息’
})
return false;
});