LayUI里面layer.open()弹出层是一个十分常用也十分强大的功能，比如我们经常是先把记录以数据表单datatable方式显示出来，然后增删改查的功能就利用layer.open调取另一个form表单页面来进行数据编辑并提交数据完成数据表的更新操作。
同样，Layui-form也是layUI的核心组件，提供了十分丰富的功能实现，特别是lay-verify的校验功能，十分灵活也十分方便，基本上可以把与数据无关的格式校验都放在前端来完成了。但是lay-verify检验执行却必须是在form表单中的submit按钮提交后才能执行，其提交是直接提交后端服务的，并不会走到layer.open()中的yes回调函数中。
这样就出现一个最大的问题，layer.open（）执行时设置的button的回调函数，可以让程序实现在各阶段的控制。但用这些button提交时，form表单页面里设置的lay-verify就失效了，而用form中设置的submit按钮来提交，则layer.open()的各项控制就完全用不上了。有啥办法，能够接着用layer.open中设置的btn提交以便在回调函数写各种控制，同时又让表单中的校验规则有效呢？
这两天一直都在反复试验这个问题，最终居然让我找到了，就是用form.submit()进行手动提交。其实form.submit这个方法早早就有了，只是以前方法太简单，而且提交之后就没回应，十分不友好，所以大家用到layer.open（）时，还是习惯用传统的方法取出数据再用ajax提交，而忽视掉这个功能最近几版已经改进了许多。
俺实现的这个程序的主要目的是系统内完成账户切换，也就是在主界面里弹出一个窗口，输入账号和密码提交到后端去，后端完成验证后，将启用设置新的用户环境。（正因为输入项十分简单，所以俺才有闲心专项研究这个问题。。。。）
废话不说了，上程序。
第一个，是切换账户的html程序，entry.html.j2
form中用lay-filter设定了layui的标识entryform。form中有三个输入域，并且对username和password设置了lay-verify检验，在js中用form.verify进行自定义校验规则的实现，校验规则比较简单，其实用layui文档中给的正则表达式会更强大。在测试程序时，是在系统内直接展现html页面，并用页面内的button提交的，检验规则有效。后来用layer.open打开时，把那个button封上了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>账户切换页面</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>
<body>
<div style="padding:10px;">
<form class="layui-form layui-form-pane" action="" method="post" lay-filter="entryform" target="_top">
<div class="layui-form-item">
<label class="layui-form-label">账户名</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" lay-verify="username" autocomplete="off" placeholder="请输入账户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">口令</label>
<div class="layui-input-block">
<input type="password" id="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入口令" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" id="online" name="online" title="记住密码" lay-skin="primary" checked>
</div>
<!--div class="layui-form-item">
<button class="layui-btn layui-btn-fluid layui-bg-blue"" lay-filter="loginSubmit" lay-submit>登录</button>
</div-->
</form>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
form.verify({
username: function(value) {
if (value.length < 4 || value.length>20) {
return '账户名长度必须在4~20之间';
}
},
password: function(value) {
if (value.length < 6 || value.length>9) {
return '密码长度为6到9位';
}
}
});
/*form.on('submit(loginSubmit)', function(data){
return false;
});*/
});
</script>
</body>
</html>第二个，是主界面用layer.open()的iframe方式打开上面的页面文件，展现账户切换的功能。在layer.open()里设置了两个btn，因此主要的处理是在yes回调接口中实现的。程序如下：
//切换账户
$('#LAY_switch_acct').click(function(){
url = '/entry/'
layer.open({
type: 2,
title:'切换账户',
area: ['420px', '290px'], //宽高
skin: 'layui-layer-rim', //样式类名
content: url,
btn:['登录','关闭'],
yes: function(index, layero){
var iframeWin = window[layero.find('iframe')[0]['name']];
var vform = iframeWin.layui.form;
vform.submit('entryform',function(data){
console.log('data:' + JSON.stringify(data));
$.post(url,
data.field,
function(rs){
if(rs.success){
layer.closeAll();
layer.msg(rs.msg,function(){});
window.location.href = "/admin/";;
}else{
layer.msg(rs.msg,function(){});
}
},'json');
});
},
btn2: function(index, layero){
layer.closeAll();
},
});
});
前几天做了很多增删改查的功能，都是用layer.open打开编辑页面，然后在yes中获取form的值数组，再用post进行提交的，只是还没研究到lay-verify这块，今天这个功能特别简单，所以觉得研究一下也是很有必要的，应该说网上的参考做法都复杂了，比如绑定页面内提交按钮，在用btn0提交后激发form内提交按钮动作，太难控制了。
所以下午又好好地研究layui的弹出页原始文档，找到了form.submit（）方法。关于layer.open()弹出的表单提交，一直有两种思路，一种是用form.submit提交，另一种就是用ajax提交。form.submit最大的问题是提交后没有回应，所以基本不建议用。
[PS：其实form.submit（）这个方法我一直在研究着，因为以前的layer.open必须写ajax提交，稍有些繁琐，如果submit()能够一键提交肯定要好的多。昨天账户切换的第一个实现思路，就是在yes回调接口处，直接用form.submit()提交，但提交到后端都正常执行，前端展示时，却发现用户信息并没有切换，觉得可能是不带任何参数的submit()提交功能会新开一个session，所以就废弃还用以前的方法了。]
这次又仔细地看了一个form.submit的说明，发现它多了两个参数，一个是form的filter项，另一个是有个提交的回调函数入口，入口参数是表单数据data。于是我就试验了一下，按照要求填入 参数，先试验verify功能，居然有效了，
然后，再试验提交功能，发现后端服务居然没响应。再看文档，要求在回调函数中加入post来完成数据提交，好吧，虽然比想的复杂一些，但这样控制流却完善了，就这么办。而且最大的好处，回调函数的入口参数data.field里面就存的是form的输入值，直接写在接口里就可以。后端的服务程序完全不用改动。
最后是后端程序，这里只截取一部分内容，很简单，如下：
@bp.route('/entry/',methods=['GET','POST'])
@login_required
def entry():
error = None
if request.method == 'GET':
return render_template('admin/entry.html.j2')
else:
user = request.values.get('username')
online = request.values.get('online')
pwd = request.values.get('password')
logging.debug('ENTRY--username %s ' % user)
users = Users.query.filter_by(username=user).first()
if users == None:
errmsg = '无此用户'
logging.info(errmsg)
rs_data = {
'success':0,
'msg':errmsg,
'status':201
}
return json.dumps(rs_data)
if user != users.username or users.check_password(pwd) == False :
errmsg = "用户名或密码错！！"
rs_data = {
'success':0,
'msg':errmsg,
'status':201
}
return json.dumps(rs_data)
#return render_template('admin/entry.html.j2',message=error)
session[config.ADMIN_USER_ID] = users.uid
if online:
logging.debug('记住我设置')
session.permanent = True
bp.permanent_session_lifetime = timedelta(days=14)
logging.debug('entry main %s... %s' % (users.uid,users.username))
rs_data = {
'success':1,
'msg':'切换账户成功' + user,
'status':200
}
return json.dumps(rs_data)
最后，上几张系统截图吧。
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
