浅谈layui 绑定form submit提交表单的注意事项

简介

Layui是一个简洁易用、界面优美的前端UI框架，由于其易于上手，成为了很多前端工程师首选框架之一。在Layui中，表单提交是一个常见的操作，而绑定表单提交的事件则是经常使用到的操作。本文将会简单介绍在Layui中，绑定form submit提交表单的注意事项。

使用方式

通常情况下，在Layui中，我们可以使用form.on('submit(formDemo)', function(data){ ... })来绑定表单提交事件，在函数中获取表单提交的数据，以完成一些特定的操作。同时，为了防止表单提交时出现页面的刷新现象，我们也可以在函数中返回false，以阻止表单的默认提交事件。示例代码如下：

layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});

在上述代码中，我们在定义form.on('submit(formDemo)', function(data){ ... })函数时，将绑定的formDemo写在了事件中，而不是直接使用表单的id属性，这是因为Layui中，使用的是表单元素中的lay-filter属性来进行事件的绑定。在HTML代码中，lay-filter属性所对应的值即为绑定函数事件的名称，如下所示：

<form class="layui-form" action="">
  <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 layui-form-text">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
      <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

需要注意的是，表单中的按钮需要设置lay-submit和lay-filter两个属性，其中lay-submit用来识别当前按钮为提交操作的按钮，lay-filter则用来在函数中进行绑定操作。

注意事项

在绑定表单提交事件时，需要注意以下几个问题：

1. data.form 和 data.field 的区别

在form.on('submit', function(data){ ... })的函数中，data对象中包含两个重要的属性：data.form和data.field。其中，data.form是获取整个表单的DOM元素，而data.field是获取表单序列化为的键值对数组。需要注意的是，对于某些使用了隐藏元素或多个重复name名称的表单项来说，需要注意data.field获取的数据可能不尽如人意。

2. layui.layer 和 layui.form 的区别

在绑定表单提交事件时，常常使用layer.msg()或其他类似的弹出框函数来展示提交结果。然而需要注意的是，Layui中有两个不同的模块——layui.layer和layui.form，它们具有不同的作用。其中，layui.layer用来创建弹出层或一些自定义弹出框，而layui.form则用来处理表单相关的操作，如表单赋值、获取等。如果在表单提交时，使用了错误的模块来进行弹出操作，可能会导致某些不可预见的错误。

示例说明

示例1：表单提交后跳转到新页面

在Layui中，如果需要在表单提交后跳转到新页面，可以使用以下代码：

layui.use('form', function(){
  var $ = layui.jquery,
      form = layui.form;

  form.on('submit(formDemo)', function(data){
    //需要提交的数据参数
    var formData = data.field;
    //表单提交请求
    $.ajax({
      url: "/submit",
      data: formData,
      method: "POST",
      success: function(result){
        //请求成功后跳转到新页面
        window.location.href = "/newPage";
      },
      error: function(error){
        console.log(error);
      }
    })
    //防止表单默认提交
    return false;
  });
});

在上面的代码中，我们首先定义了$.ajax()函数来发送表单提交请求，并在请求成功后跳转到新页面。同时，在form.on('submit', function(data){ ... })中，我们将return false来防止表单的默认提交事件。

示例2：表单提交后弹出提示信息

在Layui中，如果需要在表单提交之后弹出提示信息，可以使用以下代码：

layui.use('form', function(){
  var form = layui.form;

  form.on('submit(formDemo)', function(data){
    //需要提交的数据参数
    var formData = data.field;
    //弹出提示框
    layui.layer.msg(JSON.stringify(formData));
    //防止表单默认提交
    return false;
  });
});

在上面的代码中，我们使用了layui.layer.msg()函数来创建一个弹出提示框，并在框内展示表单提交的数据。与示例1一样，我们也是使用return false来防止表单的默认提交事件。