Layui中form.on(submit)事件使用详解

什么是form.on("submit")

在Layui框架中，form.on("submit") 是一个非常重要的表单提交事件监听器，它允许我们在表单提交前拦截并处理表单数据。

基本语法

form.on("submit(*)", function(data){
  console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

参数详解

• data.elem：触发事件的DOM元素，通常是提交按钮
• data.form：表单的DOM对象，只有在页面中存在form标签时才会返回
• data.field：表单中所有字段的键值对集合

使用示例

<form class="layui-form" action="">
  

    用户名
    

      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" class="layui-input">
    
  
  

    

      <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
    
  
</form>

注意事项

1. return false用于阻止表单默认提交行为
2. 如果需要异步提交，可以在此事件中发送AJAX请求
3. 事件过滤器的名称需要与按钮的lay-filter属性值匹配