使用layui前端框架弹出form表单以及提交的示例

下面就给你讲解一下使用layui前端框架弹出form表单以及提交的完整攻略。

首先，我们需要在页面中引入layui的CSS和JS文件，并且调用layui的模块：

<!-- 引入layui -->
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../js/layui.js"></script>

<script>
layui.use(['form', 'layer'], function(){
  var form = layui.form;
  var layer = layui.layer;
  // 在这里写对layui的调用代码
});
</script>

然后，我们可以先写一个普通的html表单，然后用layer的open方法来弹出模态框，使表单变成一个弹出层，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui表单提交-popup方式</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/layui.js"></script>
</head>
<body>
    <!-- 普通的表单 -->
    <div class="layui-form" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" 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="tel" name="phone" required lay-verify="required|phone" 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>
            </div>
        </div>
    </div>

    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;

            // 弹出表单
            function popupForm() {
                layer.open({
                    type: 1,
                    title: '提交表单',
                    area: ['400px', '300px'],
                    content: $('#form') // 弹出层的内容就是表单
                });
            }

            // 直接弹出表单
            popupForm();
        });
    </script>
</body>
</html>

在这个示例中，我们定义了一个表单，并且用layer的open方法弹出表单。弹出的模态框里是表单内容，用户可以在这个弹出层里填写并提交表单。

接下来，我们为表单绑定提交事件：

<script>
layui.use(['form', 'layer'], function(){
    var form = layui.form;
    var layer = layui.layer;

    // 弹出表单
    function popupForm() {
        layer.open({
            type: 1,
            title: '提交表单',
            area: ['400px', '300px'],
            content: $('#form') // 弹出层的内容就是表单
        });
    }

    // 绑定表单提交事件
    form.on('submit(formDemo)', function(data){
        // 提交表单
        layer.msg(JSON.stringify(data.field));
        return false;
    });

    // 直接弹出表单
    popupForm();
});
</script>

在这个示例中，我们为提交按钮绑定了submit事件，当用户点击提交按钮后，就会触发这个事件，我们在这里可以将表单中的内容通过Ajax提交到后台进行处理。在这个示例中，我们只是简单地将表单中的内容弹出来显示给用户。

除了直接弹出表单外，我们还可以在页面中定义一个按钮，当用户点击这个按钮时再弹出表单，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Layui表单提交-popup方式</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/layui.js"></script>
</head>
<body>
    <button class="layui-btn" id="btn-pop-form">弹出表单</button>

    <!-- 普通的表单 -->
    <div class="layui-form" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" 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="tel" name="phone" required lay-verify="required|phone" 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>
            </div>
        </div>
    </div>

    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;

            // 弹出表单
            function popupForm() {
                layer.open({
                    type: 1,
                    title: '提交表单',
                    area: ['400px', '300px'],
                    content: $('#form') // 弹出层的内容就是表单
                });
            }

            // 绑定按钮点击事件
            $('#btn-pop-form').on('click', function() {
                popupForm();
            });

            // 绑定表单提交事件
            form.on('submit(formDemo)', function(data){
                // 提交表单
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>
</body>
</html>

在这个示例中，我们增加了一个按钮，当用户点击这个按钮时，就会调用弹出表单的函数popupForm()来弹出模态框。同时，我们还为弹出的表单绑定了submit事件，当用户提交表单时就会触发这个事件。

这就是使用layui前端框架弹出form表单以及提交的示例攻略，该攻略详细讲解了如何使用layui的模块来实现这样的功能，并且还提供了两个具体的示例用法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用layui前端框架弹出form表单以及提交的示例 - Python技术站

使用layui前端框架弹出form表单以及提交的示例

相关文章