1. layui简介
layui是一款基于jQuery的模块化前端UI框架，他的特点是易用、轻量、明了、高效。layui的官方语言为中文，具有开发速度快、表现力强、文档全面、稳定性高等优点，因此在前端开发中得到了广泛使用。
2. layui弹出form简介
在layui中，form模块是常用的功能模块之一，它可以方便地实现表单元素的操作以及一些验证码的生成等等。同时，layui弹出form功能的实现可以实现更好的用户体验与交互效果。而在layui中使用form提交表单或者验证表单时候会弹出form弹层，这是layui弹出form的一种用法。
3. 准备工作
3.1 引入layui框架
在开始使用layui弹出form前，需要首先引入layui框架。我们可以下载layui框架后放在我们的项目中，再在项目中引入layui的相关文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出form</title>
<!-- 引入layui框架 -->
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
</body>
</html>
3.2 在body中写form表单
在引入layui框架后，我们需要在页面中写一个form表单，表单中包含需要提交的数据项。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出form</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<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" 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">
<label class="layui-form-label">验证码</label>
<div class="layui-input-block">
<input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input"/>
</div>
</div>
</body>
</html>
4. 实现弹出form
4.1 layui.use方式实现弹出form
layui.use是一种按需加载机制，用于定义需要的模块，可以在模块预加载完毕后，调用回调函数，并将加载的模块引用传入回调函数。因此我们可以用它来实现layui弹出form。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出form</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<form class="layui-form">
<!-- form表单省略 -->
</form>
<script>
layui.use(["form","layer"], function() {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer;
//弹出form层
layer.open({
type: 1,
title: "登录",
area: ["400px", "300px"],
content: $("form"),
btn: ["提交", "取消"],
yes: function(index, layero) {
layer.msg("提交成功");
}
});
});
</script>
</body>
</html>
代码说明：
在使用layui.use的方式引入form模块以及弹出层模块layer;
使用layer.open弹出一层，在content中传入需要显示的form表单即可弹出form。
4.2 构造弹出form
除了使用layui.use的方式实现弹出form，我们还可以通过构造弹层的方式实现弹出form。通过此种方式，我们可以自定义form表单的标题、操作按钮等等。下面是具体实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui弹出form</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css"/>
<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
<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" 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">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inlin weixinu-checkCode">
<input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input"/>
<img alt="显示验证码图片" title="看不清/换一张" src="code.php" align="absmiddle" onclick="this.src='imgcode.php?'+Math.random()"/>
</div>
</div>
<div>
<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
</div>
</form>
<script>
layui.use(["form","layer"], function() {
var $ = layui.jquery,
form = layui.form,
layer = layui.layer;
// 构造弹出层表单
var formDemo = layer.open({
title: "表单",
type: 1,
content: $("form"),
area: ["400px"],
btn: ["提交", "取消"],
yes: function(index, layero){
// lay-submit指定的class
$('form.layui-form button.layui-btn').click();
}
});
//表单验证提交
form.on('submit(submit)', function(data) {
layer.msg(JSON.stringify(data.field));
// 防止页面跳转
return false;
});
});
</script>
</body>
</html>
代码说明：
首先，我们使用layui.use的方式引入form模块以及弹出层模块layer，然后指定“立即提交”按钮为lay-submit指定的class；
通过layer.open()构造弹出层，设置标题、类型、内容、高度宽度、按钮等信息；
使用layui.form的on方法，提交表单并通过layer.msg输出数据，同时return false阻止页面跳转。
5. 结语
本篇文章介绍了layui弹出form的实现，通过两种方式实现了layui弹出form的功能，并对每种方式进行了详细的注释说明。经过这篇文章的学习，我们可以轻松掌握layui弹出form的实现方式，从而实现更好的用户交互体验。