一、对接Layui Css 与 Js外部连接（我这个位置写的我本地的地址大家可以去网上搜索一下这两个地址）
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js" charset="utf-8"></script>
二、写入Js文件
注意：1、可随意修改input中的类型名称
2、var formData = {}定义表单中的值
3、$.post(）{}；中填写后台地址和数据传入，data值获取反馈结果
<script>
layui.use(['form','jquery'], function () {
var form = layui.form;
var $ = layui.jquery;
$(function () {
$("#addSite").click(function () {
layer.open({
title: '',
type: 1,
area: ['700px', '400px'],
content: '<blockquote class="layui-elem-quote layui-text">添加新用户： </blockquote>' +
'<form class="layui-form"> ' +
'<div class="layui-form-item">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">用户名：</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="siteName" class="layui-input" value="" placeholder="请输入用户名">' +
'</div></div>' +
'<div class="layui-inline">' +
'<label class="layui-form-label">真实姓名：</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="fileRecord" class="layui-input" value="" placeholder="请输入真实姓名">' +
'</div></div>' +
'</div>' +
'<div class="layui-form-item" style="width: 621px;">' +
'<div class="layui-inline">' +
'<label class="layui-form-label">职位：</label>' +
'<div class="layui-input-inline">' +
'<input type="text" required lay-verify="required" name="position" class="layui-input" value="" placeholder="请输入职位（例如：业务组）">' +
'</div></div>' +
'<div class="layui-form-item" style="width: 621px;">' +
'<label class="layui-form-label">密码：</label>' +
'<div class="layui-input-block">' +
'<input type="password" required lay-verify="required" name="password" class="layui-input" value="" placeholder="请输入密码">' +
'</div>' +
'<div class="layui-form-item" style="width: 621px;margin-top:10px;">' +
'<label class="layui-form-label">确认密码：</label>' +
'<div class="layui-input-block">' +
'<input type="password" required lay-verify="required" name="passwords" class="layui-input" value="" placeholder="请输入密码">' +
'</div>' +
'</div>' +
'</form>',
btnAlign: 'c',
btn: ['确定', '取消'],
yes: function (index, layero) {
var str = $("input[name=isIndividual]").val();
if (str == "on") {
str = "1";
} else {
str = "0";
}
if ($("input[name=siteName]").val() == null || $("input[name=siteName]").val() == "") {
layer.msg('请输入用户名', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=siteName]").focus();
});
return false;
} else if ($("input[name=fileRecord]").val() == null || $("input[name=fileRecord]").val() == "") {
layer.msg('请输入真实姓名', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=fileRecord]").focus();
});
return false;
} else if ($("input[name=position]").val() == null || $("input[name=position]").val() == "") {
layer.msg('请输入职位（例如：业务组）', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=position]").focus();
});
return false;
} else if ($("input[name=password]").val() == null || $("input[name=password]").val() == "") {
layer.msg('请输入密码', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=password]").focus();
});
return false;
} else if ($("input[name=passwords]").val() == null || $("input[name=passwords]").val() == "") {
layer.msg('请确认密码', {icon: 5, time: 2000, area: '200px', type: 0, anim: 6,}, function () {
$("input[name=passwords]").focus();
});
return false;
}
var formData = {
siteName: $("input[name=siteName]").val(),
fileRecord: $("input[name=fileRecord]").val(),
position: $("input[name=position]").val(),
password: $("input[name=password]").val(),
passwords: $("input[name=passwords]").val()
};
//console.log(formData);
$.post('/index/user/addadmin', formData, function (data) {
console.log(data);
//判断是否发送成功
if (data == 0) {
layer.msg("保存成功...", {type: 1});
location.reload();
} else if(data == 1) {
layer.msg("密码不一致...");
} else if(data == 2) {
layer.msg("账号已经存在...");
} else {
layer.msg("保存失败...", {type: 1});
}
})
}, btn2: function (index, layero) {
layer.msg("取消");
//return false 开启该代码可禁止点击该按钮关闭
}, cancel: function () {
layer.msg("关闭窗口");
//右上角关闭回调
//return false 开启该代码可禁止点击该按钮关闭
},
success: function () {
layui.use('form', function () {
var form = layui.form; //只有执行了这一步，部分表单元素才会修饰成功
form.render('checkbox');
form.on('checkbox(istrue)', function (data) {
/* if(data.elem.checked){
emailConfig['isenterprise']=1;
}; //是否被选中，true或者false*/
});
});
}
});
})
</script>三、使用thinkphp5.0框架处理数据通过json_encode(data)反馈回处理结果
版权声明：本文为skx19980524原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。