本文主要是介绍Flask+LayUI开发手记（二）：LayUI弹出层表单的校验，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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 = Noneif 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.uidif online:logging.debug('记住我设置')session.permanent = Truebp.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)
最后，上几张系统截图吧。
这篇关于Flask+LayUI开发手记（二）：LayUI弹出层表单的校验的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
