layui表单绑定按钮
时间: 2023-08-28 08:06:00 浏览: 88
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
5星 · 资源好评率100%
要绑定按钮,您需要使用`layui.form.on()`方法,该方法允许您在表单数据发生更改时执行回调函数。以下是一个基本示例:
```html
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submitBtn">提交</button>
</div>
</div>
</form>
<script>
// 监听表单提交按钮
layui.form.on('submit(submitBtn)', function(data){
// 在这里编写表单提交的处理逻辑
console.log(data.field); // 输出表单数据
return false; // 阻止表单跳转
});
</script>
```
在上面的示例中,我们使用了`lay-filter`属性来标识需要绑定的按钮。然后,我们使用`layui.form.on()`方法来监听该按钮的点击事件,并在表单数据发生更改时执行回调函数。在回调函数中,我们可以访问表单数据,然后使用它来执行任何必要的操作。最后,我们使用`return false`语句来阻止表单跳转。
阅读全文