layui中form表单学习「实例」

1. layui form表单介绍

layui是一个由输出界面交互的模块化的前端UI框架，其提供了大量的组件，其中form是其重要的组件之一。form模块可以轻松的实现表单的渲染、数据校验、提交等功能，使得前端开发更加便捷。

2. layui form表单使用

要使用layui中的form组件需要在layui中进行定义，如下：

<script>
layui.use('form', function() {
    var form = layui.form;
});
</script>

2.1 表单渲染

表单渲染可以通过lay-filter属性选择器实现。lay-filter用来为表单区域整体新增一个过滤器，其包含一个名称，方便表单元素单独校验时使用。

注意：使用lay-filter来渲染表单时，需要注意form元素必须为<form></form>，且必须为有name属性的元素。

<form class="layui-form" lay-filter="exampleform">
    <!-- 表单内容 -->
</form>

使用form.render()方法可以渲染表单，代码如下：

<script>
layui.use('form', function() {
    var form = layui.form;
    form.render();
});
</script>

2.2 表单提交

在layui中，使用form.on()方法可以对表单区域进行事件监听，如下：

form.on('submit(demo)', function(data) {
    layer.msg(JSON.stringify(data.field));
    return false;
});

其中，demo是按钮的lay-filter属性值，对应form元素的lay-filter属性值为demoform。点击按钮后，将触发对应的函数。

注意：在提交之前可以通过form.verify()方法进行数据验证，如果返回错误信息，则会阻止表单提交。

下面是一个完整的form表单实例：

<!-- html代码 -->
<form class="layui-form" lay-filter="exampleform">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
            <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-block">
            <input type="password" name="password" required 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="demo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!-- js代码 -->
<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form;
        var layer = layui.layer;
        form.render();
        // 自定义表单校验
        form.verify({
            username: function(value) {
                if (value.length < 4 || value.length > 12) {
                    return '用户名长度必须4到12位之间';
                }
            },
            password: function(value) {
                if (value.length < 6 || value.length > 16) {
                    return '密码长度必须6到16位之间';
                }
            }
        });
        // 监听表单提交事件
        form.on('submit(demo)', function(data) {
            // 获取表单数据并校验
            var username = data.field.username;
            var password = data.field.password;
            if(username === 'admin' & password === '123456') {
                layer.msg('登录成功！');
            } else {
                layer.msg('登录失败，请重新登录！');
            }
            return false;
        });
    });
</script>