关于layui 绑定form submit提交表单注意点

本文介绍了使用layui框架进行表单提交的方法,包括如何设置提交按钮及事件过滤器,并附带了具体的HTML和JavaScript代码示例。

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

				<form method="post" class="layui-form">
					<input type="text" name="name" placeholder="用户名" required lay-verify="required" class="layui-input layui-form-danger login-input" >
					<input type="password" name="password" placeholder="密码" required lay-verify="required" class="layui-input layui-form-danger login-input">
					<button class="layui-btn layui-btn-fluid login-btn" lay-submit lay-filter="login" >登录</button>
				</form>
			</div>
			
		</div>
		
		<script type="text/javascript">

        $(function  () {
            layui.use('form', function(){
              var form = layui.form;
              //监听提交
              form.on('submit(login)', function(data){
                console.log(data);
                return false;
              });
            });
        })
		</script>

绑定button按钮作为提交按钮

1、必须加上lay-submit属性,这个文档没看到具体描述,应该是作为提交按钮的标识

这是文档的介绍

lay-submit无需填写值绑定触发提交的元素,如button

2、需要加上lay-filter="标识" 这个属性,这个是layui特有的事件过滤器,个人感觉就是选择器一样

这是文档的介绍

lay-filter任意字符事件过滤器(公用属性),主要用于事件的精确匹配,跟选择器是比较类似的。

 

layui是本人最近学习中的东西,如有说错,欢迎及时留意指出!!

### 使用 Layui 框架获取 Form 表单数据的方法 在 Layui 中,可以通过监听 `form` 的提交事件并捕获表单的数据对象来实现对表单数据的获取。以下是具体的实现方式: #### 方法描述 通过绑定 `submit` 事件到指定按钮上,可以触发回调函数,在该函数中访问 `data.field` 属性即可获得表单的所有字段及其对应的值[^1]。 #### 实现代码示例 以下是一个完整的示例代码片段,展示了如何使用 Layui 获取表单数据: ```javascript layui.use(['form'], function() { var form = layui.form; // 绑定 submit 事件 form.on('submit(btnSubmit)', function(data) { // 表单数据存储在 data.field 对象中 console.log(data.field); // 输出表单数据 // 阻止默认提交行为 return false; }); }); ``` 在此代码中,`btnSubmit` 是绑定到 `<button>` 或者 `<input type="submit">` 上的一个类名或者属性名称。当用户击此按钮时会触发表单提交事件,并将表单中的所有输入项作为键值对形式存入 `data.field` 中。 #### 清空或重置表单 如果需要清空或重置表单,则可利用原生 JavaScript 提供的 reset 功能配合 Layui 的渲染机制完成操作[^2]: ```javascript $(".layui-form")[0].reset(); layui.form.render(); // 刷新组件状态 ``` 以上两行代码分别执行了 HTML 元素的重置以及重新绘制 Layui 控件样式的过程,从而达到清除当前填写内容的效果。 #### 复杂场景下的应用 对于某些复杂需求比如动态生成列头的情况,也可以结合模板引擎技术来自定义单元格显示逻辑[^3]。例如下面这段 Vue.js 结合 Element UI 的例子虽然不属于 Layui 范畴,但它同样体现了灵活运用前端工具链解决问题的思想模式: ```html <el-table :data="test"> <el-table-column label="用户"> <template slot-scope="scope"> {{ scope.row.username }}-{{ scope.row.id }} </template> </el-table-column> </el-table> ``` 尽管上述案例并非直接针对 Layui,但其设计理念值得借鉴——即充分利用现有资源构建满足业务诉求的功能模块。 ---
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值