Flask+LayUI开辟手记（二）：LayUI弹出层表单的校验

tsx81429  金牌会员 | 2024-8-28 00:49:20 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 667|帖子 667|积分 2001

        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封上了。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.       <title>账户切换页面</title>
  7.     <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
  8. </head>
  9. <body>
  10. <div  style="padding:10px;">
  11.     <form class="layui-form layui-form-pane" action="" method="post"  lay-filter="entryform" target="_top">
  12.         <div class="layui-form-item">
  13.             <label class="layui-form-label">账户名</label>
  14.             <div class="layui-input-block">
  15.                 <input type="text" id="username" name="username" lay-verify="username" autocomplete="off" placeholder="请输入账户名" class="layui-input">
  16.             </div>
  17.         </div>
  18.         <div class="layui-form-item">
  19.             <label class="layui-form-label">口令</label>
  20.             <div class="layui-input-block">
  21.                 <input type="password" id="password" name="password" lay-verify="password" autocomplete="off" placeholder="请输入口令" class="layui-input">
  22.             </div>
  23.         </div>
  24.         <div class="layui-form-item">
  25.             <input type="checkbox" id="online" name="online" title="记住密码" lay-skin="primary" checked>
  26.         </div>
  27.         <!--div class="layui-form-item">
  28.             <button class="layui-btn layui-btn-fluid layui-bg-blue"" lay-filter="loginSubmit" lay-submit>登录</button>
  29.         </div-->
  30.     </form>
  31. </div>
  32. <script src="/static/layui/layui.js"></script>
  33. <script>
  34.     layui.use(['layer', 'form'], function () {
  35.         var $ = layui.jquery;
  36.         var layer = layui.layer;
  37.         var form = layui.form;
  39.         form.verify({
  40.             username: function(value) {
  41.                 if (value.length < 4 || value.length>20) {
  42.                     return '账户名长度必须在4~20之间';
  43.                 }
  44.             },
  45.             password: function(value) {
  46.                 if (value.length < 6 || value.length>9) {
  47.                     return '密码长度为6到9位';
  48.                 }
  49.             }
  50.         });
  52.         /*form.on('submit(loginSubmit)', function(data){
  53.             return false;
  54.         });*/
  56.     });
  57. </script>     
  58. </body>
  59. </html>
复制代码
 第二个，是主界面用layer.open()的iframe方式打开上面的页面文件，显现账户切换的功能。在layer.open()里设置了两个btn，因此主要的处理是在yes回调接口中实现的。步伐如下：
  1. //切换账户
  2. $('#LAY_switch_acct').click(function(){
  3.     url = '/entry/'
  4.     layer.open({
  5.         type: 2,
  6.         title:'切换账户',
  7.         area: ['420px', '290px'],   //宽高
  8.         skin: 'layui-layer-rim',    //样式类名
  9.         content:  url,
  10.         btn:['登录','关闭'],
  11.         yes: function(index, layero){
  12.             var iframeWin = window[layero.find('iframe')[0]['name']];
  13.             var vform = iframeWin.layui.form;
  14.             vform.submit('entryform',function(data){
  15.                 console.log('data:' + JSON.stringify(data));
  16.                 $.post(url,
  17.                     data.field,
  18.                     function(rs){
  19.                     if(rs.success){
  20.                         layer.closeAll();
  21.                         layer.msg(rs.msg,function(){});
  22.                         window.location.href = "/admin/";;
  23.                     }else{
  24.                         layer.msg(rs.msg,function(){});
  25.                     }
  26.                 },'json');
  27.             });
  28.         },
  29.         btn2: function(index, layero){
  30.             layer.closeAll();
  31.         },
  32.     });
  34. });
复制代码
         前几天做了许多增编削查的功能，都是用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的输入值，直接写在接口里就可以。后端的服务步伐完全不用改动。
       最后是后端步伐，这里只截取一部分内容，很简单，如下：
  1. @bp.route('/entry/',methods=['GET','POST'])
  2. @login_required
  3. def entry():
  4.     error = None
  5.     if request.method == 'GET':
  6.         return render_template('admin/entry.html.j2')
  7.     else:
  8.         user = request.values.get('username')
  9.         online = request.values.get('online')
  10.         pwd = request.values.get('password')
  12.         logging.debug('ENTRY--username %s ' % user)
  13.         users = Users.query.filter_by(username=user).first()
  14.         if users == None:
  15.             errmsg = '无此用户'
  16.             logging.info(errmsg)
  17.             rs_data = {
  18.                 'success':0,
  19.                 'msg':errmsg,
  20.                 'status':201
  21.             }
  22.             return json.dumps(rs_data)
  23.         if user != users.username or users.check_password(pwd) == False :
  24.             errmsg = "用户名或密码错！！"
  25.             rs_data = {
  26.                 'success':0,
  27.                 'msg':errmsg,
  28.                 'status':201
  29.             }
  30.             return json.dumps(rs_data)
  31.             #return render_template('admin/entry.html.j2',message=error)
  32.         session[config.ADMIN_USER_ID] = users.uid
  33.         if online:
  34.             logging.debug('记住我设置')
  35.             session.permanent = True
  36.             bp.permanent_session_lifetime = timedelta(days=14)
  37.         logging.debug('entry main %s... %s' % (users.uid,users.username))
  38.         rs_data = {
  39.             'success':1,
  40.             'msg':'切换账户成功' + user,
  41.             'status':200
  42.         }
  43.         return json.dumps(rs_data)
复制代码
最后，上几张系统截图吧。




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81429

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表