layer是一个非常优秀的，界面较好，参数多，回调多，二开容易的一个弹窗为主的插件，也是在平常切图（qietu.com）中使用频率较高的一款插件，layerui在其他表单，表格等元素上也逐渐跟上，形成了一套完整的ui体系，在近期的一个layui后台页面制作中遇到的问题-“弹出表单，并且验证”，这个时候需要用到layui自带的弹窗+表单验证组合实现，附代码片段，亲测有效。
layui.config({
base: 'layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'upload','form', 'laydate','table','dropdown'], function(){
var dropdown = layui.dropdown;
// 监听菜单点击
dropdown.onFilter('test1', function (event) {
// ...业务代码
console.log(event);
})
//form
var $ = layui.$
,admin = layui.admin
,element = layui.element
,form = layui.form
,layer = layui.layer
,table = layui.table
,laytpl = layui.laytpl;
element.render();
// 复选框
form.on('checkbox(choiceOne)', function (data) {
console.debug(data);
var len = $("input:checked").length;
if (len < 1) {
$(data.elem).next().attr("class", "layui-unselect layui-form-checkbox");
$(data.elem).prop("checked", false);
layer.msg('是否显示，请至少选择一项！', { icon: 5 });
return false;
}
});
form.on('submit(demo1)', function (data) {
var len = $("input:checked").length;
if (len < 1) {
layer.msg('是否显示，请至少选择一项！', { icon: 2 });
return false;
}
});
//全选 反选
form.on('checkbox(allChoose)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数
child.each(function(index, item){
item.checked = data.elem.checked;
});
form.render('checkbox');
});
// 全选时哟有一个取消选中，改为未全选
form.on('checkbox(choiceOne)', function(data){
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]'); // 复选框总数
var childed = $(data.elem).parents('table').find('tbody input[type="checkbox"]:checked'); // 选中的复选框总数
if(childed.length == child.length){
$(data.elem).parents('table').find('.checkboxAll').prop("checked", true);
form.render('checkbox');
}else{
$(data.elem).parents('table').find('.checkboxAll').prop("checked", false);
form.render('checkbox');
}
});
//自定义验证规则
form.verify({
});
//表单提交
form.on('submit(component-form-element)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
//laydate
var laydate = layui.laydate;
//同时绑定多个
lay('.laydate-item').each(function(){
laydate.render({
elem: this
,trigger: 'click'
// ,type: 'month'
// ,format: 'yyyy-MM'
});
});
//添加权限分组
$('#addrolegroup').click(function(){
layer.closeAll();
layer.open({
type: 1,
title :'提示',
shade :false,
//offset:'rb',
//offset:[0, 0],
skin: 'layui-layer-rim', //加上边框
area: ['450px', '300px'], //宽高
content: $('#tanchuang'),
success: function (layero) {
$(':focus').blur();
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formDemo',
'lay-submit': ''
});
form.render();
},
btn:['确定','关闭'],
yes:function(){
form.on('submit(formDemo)', function (data) {
//表单数据formData
var formData = data.field;
layer.msg('提交');
// $.ajax({
// "url": '',
// "data": formData,
// "type": "POST",
// "success": function () {
//
// layer.alert('添加成功', {
// skin: 'layui-layer-molv',
// closeBtn: 0
// })
// },
// "error": function (data) {
// layer.alert('添加失败', {
// skin: 'layui-layer-molv',
// closeBtn: 0
// })
// }
// })
});
},
btn2:function(){
},
});
})
//添加权限
$('.addrole').click(function(){
layer.closeAll();
layer.open({
type: 1,
title :'提示',
shade :false,
//offset:'rb',
//offset:[0, 0],
skin: 'layui-layer-rim', //加上边框
area: ['450px', '300px'], //宽高
content: $('#tjtanchuang'),
success: function (layero) {
$(':focus').blur();
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formadd',
'lay-submit': ''
});
form.render();
},
btn:['确定','关闭'],
yes:function(){
form.on('submit(formadd)', function (data) {
//表单数据formData
var formData = data.field;
layer.msg('提交');
});
},
btn2:function(){
},
});
})
//修改权限
$('.editrole').click(function(){
layer.closeAll();
layer.open({
type: 1,
title :'提示',
shade :false,
//offset:'rb',
//offset:[0, 0],
skin: 'layui-layer-rim', //加上边框
area: ['450px', '300px'], //宽高
content: $('#xgtanchuang'),
success: function (layero) {
$(':focus').blur();
// 添加form标识
layero.addClass('layui-form');
// 将保存按钮改变成提交按钮
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formedit',
'lay-submit': ''
});
form.render();
},
btn:['确定','关闭'],
yes:function(){
form.on('submit(formedit)', function (data) {
//表单数据formData
var formData = data.field;
layer.msg('提交');
});
},
btn2:function(){
},
});
})
});