如何实现layui中表单提交以及验证和修改弹框

Layui 是一款简洁易用、颜值高、功能强大的前端UI框架。Layui通过封装了一些经典模块，大大降低了前端开发的难度，包括但不限于表格、表单、弹窗、日期选择器等。

在这篇文章中，我们将会探讨在layui中如何实现表单提交以及表单的验证和修改弹框。

1. 实现表单提交

表单提交在layui中非常简单，只需要在form标签中添加一个 lay-filter 属性，并给其设置一个值，就能够通过监听提交事件，来得到表单提交的数据。

下面是一个最简单的表单提交示例：

<form class="layui-form" lay-filter="demo-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="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="password" name="password" 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="formDemo">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

首先，我们要给 form 标签添加两个属性，分别是 lay-filter 和 action。其中，lay-filter 属性为自定义的值，便于我们通过监听提交事件得到表单数据；action 属性则为提交的地址，这里留空表示提交至当前页面。

接着，我们在最后的提交按钮中添加了 lay-submit 和 lay-filter 两个属性。其中，lay-submit 表示开启提交功能；lay-filter 则表示监听的过滤器名称，方便我们在监听函数中获取表单数据。

接下来，我们需要通过 layui 的 form 模块监听 submit 事件，从而获取表单数据并提交到服务器。代码如下：

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

在代码中，首先我们通过 layui.use 引入了 form 模块，并将其命名为 form。

接着，我们使用 form.on 监听表单提交事件。这里需要注意的是，提交按钮中的 lay-filter 值需要与监听函数中的参数相同。

参数 data 包含了表单的所有数据，通过 JSON.stringify 转换成字符串进行输出。

2. 实现表单验证

表单验证可用于确认用户输入信息的正确性，使得后台处理数据时更加简单可靠。layui 提供了多种验证方式，可以满足不同需求的开发者。

下面是一个简单的表单验证示例：

<form class="layui-form" lay-filter="demo-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="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="password" name="password" lay-verify="pass" 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="formDemo">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

我们在表单元素中加入了 lay-verify 属性，用于做表单的验证。lay-verify 属性包括了一系列的验证规则，如 required（必填项），phone（手机号码），email（邮箱）等。

接着，我们需要通过 layui 的 form 模块，来为每一个表单元素添加验证规则。代码如下：

layui.use('form', function(){
    var form = layui.form;
    
    //自定义验证规则
    form.verify({
        pass: [/(.+){6,12}$/, '密码必须6到12位'],
        checkUsername: function(value, item){
            if(value.length < 5){
                return '用户名长度不能少于5位';
            }
        },
        checkEmail: function(value, item){
            if(!/^[\S]+@[\S]+\.[\S]+$/.test(value)){
                return '邮箱格式不正确';
            }
        }
    });
    
    //监听提交
    form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });
});

在代码中，我们使用 form.verify 方法定义了多个自定义验证规则，不同的验证规则通过数组形式进行定义。其中， 个参数为正则表达式的模式串，第二个参数为提示信息。

接下来，我们需要给表单元素加上对应的 lay-verify 属性，来使用自定义的验证规则。

比如，我们给密码输入框加上了验证规则 lay-verify="pass"，表示需要符合我们自定义的密码规则。

我们还可以给每个表单元素加上不同的自定义验证规则，以实现更加精细的验证规则。

3. 实现修改弹框

在开发中，我们往往需要通过弹出层的形式来进行数据的修改和新增操作。layuie 提供了 lay-form 模块，便于开发这样的弹出窗口。

下面是一个 lay-form 简单示例，用于实现修改弹框的功能。

<button class="layui-btn" onclick="showEdit()">编辑</button>

<script>
    function showEdit() {
        layer.open({
            type: 1,
            title: '编辑',
            area: ['400px', '500px'],
            content: $('#editLayer')
        });
    }
</script>

<div id="editLayer" style="display:none;">
    <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">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="pass" 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="formDemo">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

在代码中，我们首先创建了一个按钮，当用户点击该按钮时，会触发 showEdit 函数。

showEdit 函数则使用了 layui 的 layer 模块中的 open 方法，用于弹出一个窗口。open 方法的参数包括：

- type：弹层类型，0表示普通的信息框，1表示页面层，2表示iframe层，3表示询问框，4表示提示层

- title：弹层标题

- area：弹层大小

- content：弹层内容，可以是页面连接或者jquery语法获取到的元素

在这里，我们使用了页面层，因此在 content 中传入了一个 HTML