layui的表单提交以及验证和修改弹框的实例

下面我将为你详细讲解“layui的表单提交以及验证和修改弹框的实例”的完整攻略。

什么是layui

Layui是一款前端UI框架，致力于提供易用、美观的UI组件以及丰富的应用场景支持。

lay-submit和lay-filter

• lay-submit: 作用是监听表单提交事件，会阻止默认的表单提交操作。我们可以通过给按钮设置 lay-submit 属性来告诉layui，这个按钮是用来提交表单。

• lay-filter: layui在提交时会验证表单，如果表单数据错误，则不会执行表单提交操作，所以在数据验证前要取得表单数据，并且阻止默认的提交操作，这些工作可以通过lay-filter在表单标签上进行设置。

示例一

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </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">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">登录</button>
    </div>
  </div>
</form>

在上面的代码中，我们添加了一个表单，包含了用户名、密码和性别三个表单元素以及一个按钮，按钮的class设置为“layui-btn”，表示这是一个layui的按钮，在按钮中使用lay-submit属性表示该按钮是用来提交表单的，在表单标签中设置了lay-filter属性表示该表单的过滤器是“login”。

为了让这个表单提交后进行验证，我们在input标签上添加了 required lay-verify="required" 属性，这表示该表单必须填写并且验证通过才能提交成功，如果验证不通过则会弹出相应的错误提示。

示例二

<div class="layui-form-item">
  <button class="layui-btn" id="edit">编辑</button>
</div>

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
  $(function() {
    layui.use(['layer', 'form'], function() {
      // 初始化弹出层
      var layer = layui.layer;
      var form = layui.form;

      // 表单弹出框
      $('#edit').on('click', function() {
        var index = layer.open({
          type: 1,
          title: '编辑',
          content: '<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" placeholder="请输入姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-block"><input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="edit">提交</button></div></div></form>',
          area: ['500px', '300px'], // 宽高
        });

        // 表单提交
        form.on('submit(edit)', function(data) {
          console.log(data.field);
          layer.close(index); // 关闭弹出层
        });

        return false;
      });
    });
  });
</script>

在这个示例中，我们通过点击一个按钮弹出一个修改表单的弹出层，该表单中包含了姓名、年龄两个表单元素以及一个按钮。为了防止默认的表单提交操作，我们在按钮上设置了lay-submit和lay-filter属性，并在弹出层中初始化了该表单的操作。

在表单的提交事件中，我们使用了jQuery的ajax方法来提交表单数据，并且使用layer.close方法来关闭弹出层，这个方法实现了修改表单数据并保存。