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

原创

已于 2024-08-23 17:49:55 修改 · 1.3k 阅读

标签

#flask #layui #python

于 2024-08-23 17:45:10 首次发布

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">
      <t

最低0.47元/天解锁文章