笔记大全

如何使用layui弹出表单

更新时间：2023-10-01

1. 引入layui库

在body中引入layui库

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

2. 引入jquery库

使用layui需要引入jquery库

<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>

3. 弹出表单

使用layer.open()方法可弹出不同类型的窗口，例如：提示框、询问框和页面层等。使用layer.open()方法可设置多种属性，例如：标题、宽高、按钮和最大最小化等。以下示例展示了如何使用layui弹出表单。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用layui弹出表单</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" media="all">
</head>
<body>
    <button class="layui-btn layui-btn-normal" onclick="openForm()">打开表单</button>
</body>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
    function openForm() {
        layer.open({
            type: 1,
            area: ['800px', '400px'],
            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" 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="formDemo">提交</button><button type="reset" class="layui-btn layui-btn-danger">重置</button></div></div></form>'
        });
    }
</script>
</html>

4. 表单验证

使用layui表单验证需要引入form模块。在表单中添加lay-verify="规则名"属性可设置规则，例如：required（必填项）和phone（手机号）等。以下示例展示了如何使用layui表单验证。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用layui弹出表单</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" media="all">
</head>
<body>
    <button class="layui-btn layui-btn-normal" onclick="openForm()">打开表单</button>
</body>
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
    layui.use(['form'], function () {
        var form=layui.form;

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

    function openForm() {
        layer.open({
            type: 1,
            area: ['800px', '400px'],
            title: '用户信息',
            content: '<form class="layui-form" lay-filter="formDemo"><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="formDemo">提交</button><button type="reset" class="layui-btn layui-btn-danger">重置</button></div></div></form>'
        });
    }
</script>
</html>

总结

通过以上示例，您已经学会了如何使用layui弹出表单。使用layui，您可以轻松地实现表单的弹窗和验证，提升用户体验和数据的完整性。请放心使用layui，它是一套完美的UI组件库，让前端开发更加快捷！

c语言编程笔录