layui表单提交前数据检验

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

layui自带了一些简单的数据检验,lay-verify,如:

<form>
     <input type="text" name="operatMoney" class="layui-input" lay-verify="required|number">
     <div class="layui-form-item">
          <button class="layui-btn" lay-submit lay-filter="go" >保存</button>
     </div>
</form>

但需要自定义一些校验方式,或为了避免用审查元素输入非法值,在表单提交前还应该进行一次数据检验,layui提交按钮,指定lay-submit lay-filter="go" 属性:


<script>
    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(go)', function (data) {
            //console.log(data.elem);//被执行事件的元素DOM对象,一般为button对象
            //console.log(data);//被执行提交的form对象,一般在存在form标签时才会返回
            //console.log(data.field); //当前容器的全部表单字段,名值对形式:{name: value}
          
                       
            if (!(data.field.operatMoney < 1000000 && data.field.operatMoney>=0)) {
                layer.msg("检查金额数目!!");
                return false;
            }
            if (data.field.type < 2) {
                layer.msg("请选择类型!");
                return false;
            } else if (data.field.type == 2) {
                data.field.operatMoney *= -1;//改变提交data
            }
            if (data.field.description.length > 50) {
                layer.msg("备注太长了哦!");
                return false;
            }
            //var index = layer.load(1, {//加载时的样式
            //    shade: [0.1, '#fff'] //0.1透明度的白色背景
            //});
            var url = '/PartyAndActivity/Fund/CreateFund';
            $.ajax({
                type: 'POST',
                url: url,
                data: data.field,
                //async: false,
                success: function (e) {
                    if (e.result) {
                        parent.layer.msg('添加成功!', { icon: 6, shift: -1, time: 1000, shade: 0.3 });
                    } else {
                        //layer.close(index);
                        layer.msg("数据插入错误,请联系管理员!");
                    }
                },
                dataType: 'json'
            });
            parent.layer.closeAll();//不加,return false时,表单不会关闭!return ture可以;
            return false; //阻止表单跳转,否则原来的form还会提交一次! 
        });

    })
</script>

注意

1,lay-submit本身会提交数据到action,不利于数据检验,把数据放在form.on事件中,不仅可以检验数据,还可以修改提交的数据,方便做一些数据处理!

2,在form.on事件应该return false;禁止掉之后的laysubmit事件,防止表单被提交两次;

3,表单提交时数据加载框的样式可以在此时指定,关闭时使用layer.close(),而关闭表单弹窗时,应使用parent.layer.closeAll();

Layui框架form模块的表单验证 layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单。 首先要使用form模块时需要加载模块,这是所有模块都需要干的事情,否则将不能使用模块里的功能,代码如下图 加载完成后,在页面元素里的单个表单中的form元素需要加上layui定义的类‘layui-form’。 添加完后就可以在form元素里添加表单元素了,当添加完表单元素后,在表单元素里添加layui定义的属性‘lay-verify’,其作... 阅读详情

相关推荐

elementui笔记:el-table表格的输入校验

elementui笔记:借用el-form的校验,给el-table的每行数据做校验

安之ccy的博客 1万+

layui关于form表单submit提交时的校验

一、首先先看layui关于form表单的封装 二、x-admin的登录源码 三、因为x-admin的登录使用了required是必填项,只判断不为空。需要在登录时校验输入的账号密码不能小于六位数需要自己自定义添加判断。 目只会使用正则去验证,如果是用length去验证不知道可不可行。 ...

z1349757203的博客 6755

避坑指南:LayUI TreeSelect树形下拉选择器与Form表单联动的那些坑

本文深入解析了LayUI TreeSelect树形下拉选择器与Form表单联动时的常见问题与解决方案。核心在于理解并正确使用form.render()方法,以确保在组件初始化、数据回显、表单重置及动态场景(如Tab切换、弹窗)中实现状态同步。文章提供了实战代码示例和故障排查清单,帮助开发者有效规避数据提交丢失、回显异常等典型问题。

weixin_29021757的博客 120

Layui_form_lay-verify校验规则

骑大马挎大刀 1624

Layui form 表单验证 基本属性

layui 表单 1.表单自带校验 lay-verify:是表单验证的关键字 有以下值供选择: required (必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证: 格式:lay-verify=”验证A|验证B” 如:lay-verify=”required|phone|num...

狼魂之力 1284

layuiform表单提交问题

layui表单

weixin_51964457的博客 8032

Flask+LayUI开发手记(二):LayUI弹出层表单的校验

几天做了很多增删改查的功能,都是用layer.open打开编辑页面,然后在yes中获取form的值数组,再用post进行提交的,只是还没研究到lay-verify这块,今天这个功能特别简单,所以觉得研究一下也是很有必要的,应该说网上的参考做法都复杂了,比如绑定页面内提交按钮,在用btn0提交后激发form提交按钮动作,太难控制了。这次又仔细地看了一个form.submit的说明,发现它多了两个参数,一个是form的filter项,另一个是有个提交的回调函数入口,入口参数是表单数据data。

hbrown的博客 1329

layui表单中的一些常见的标签的含义,含在线实战。

lay-submit和lay-filter组合使用实现表单提交,表单检验

谁偷了我的小熊饼干 1177

Layui弹窗关闭后自动刷新父表格?3种实现方式对比(附完整代码)

本文针对Layui框架中弹窗关闭后自动刷新父级表格的需求,详细对比了三种主流实现方案:回调函数法、自定义事件触发法和Layer的end回调法。每种方案均附有完整代码示例,并分析了其优缺点与适用场景,帮助开发者根据项目复杂度选择最优雅、稳定的解决方案,有效解决跨窗口通信与数据同步问题。

gray5的博客 976

初用LayUI踩过的坑---

文章目录1.官网的表单日期检验通过的数据无法被springMVC转换为Date2.ajax提交layuiform表单,无法执行success和error的回调 这几天疯狂的赶毕业设计,之我一直都是使用bootstarp或者easyUI的,想着毕业设计,页面要搞得漂亮些,于是在网上找啊找啊,找到了这个layui,感觉很nice,于是开始边学便用,边看文档边试… 于是,我的血泪史就开始了 1.官网...

weixin_42672204的博客 1010

图片提交按钮与表单重复提交

很多情况下为了美化表单都会把提交按钮改成用一个图片来代替。但如果没有注意细节的话会造成表单的重复提交,导致一些莫名其妙的错误,例如重复插入数据库记录之类的。 我们看以下一段简单的表单代码:&lt;formid="loginform"name="loginform"action="http://game.bluesky.cn/login.php"method="get"&gt; &lt;inpu...

系统 运维 108

layui表单关闭弹窗点击的时候layer.closeAll();会闪现一下校验

layui的弹窗里有个表单。然后有个提交检验必填项,一个取消按钮。点击取消就执行关闭弹窗layer.closeAll();但是关闭弹窗的时候会闪现一下校验:请输入此字段。 我明明没有在这个按钮上加lay-submit="" lay-filter=""。 最后解决办法是在取消按钮的事件中加上return false $("#addformcancel").click(function(){ layer.closeAll(); retur...

肖肖肖丽珠的博客 609

Pear Admin LayUI:为什么选择这个基于LayUI的企业级后台管理框架?

还在为后台管理系统的开发效率而烦恼吗?每次从零开始搭建管理系统,重复造轮子的痛苦只有开发者自己知道。Pear Admin LayUI正是为解决这一痛点而生,它基于经典的LayUI框架,为企业级后台管理系统提供了一套**开箱即用**的完整解决方案。 ## 核心优势:超越传统LayUI的开发体验 ### 深度优化的UI组件体系 Pear Admin LayUI并非简单的LayUI封装,而是在原生基

gitblog_01094的博客 1035

layui中使用lay-verify进行非必填项校验(踩坑篇)

踩坑一: 某些表单元素为非必填项,但是却需要校验输入数据的格式是否正确,使用的layui的lay-verify 进行校验,例如lay-verify=“phone”验证手机号码规则是否合法,但是这玩意有个坑,如果不输入数据也会认为数据不合法,所有的校验规则,默认都是必填项!!!!!最后在官方社区找到一个帖子目问题已解决 解决办法:修改layui校验规则源码,目没发现修改以后有什么问题 修改源码如...

编码爱好者 7万+

Layui的学习路径

Layui 是一款“返璞归真”、极易上手的端 UI 框架,非常适合后端开发者、端初学者,以及需要快速搭建后台管理系统的场景。它的学习思路很清晰,可以遵循一个由浅入深、从静态样式到动态交互的过程。

x213303的博客 369

layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表,并实现动态更新

layui学习——数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废仓),要对这些字段进行数据表格行内编辑有些麻烦。因此,在数据表格中嵌套下拉列表是一个比较好的方案。步骤1:创建数据表格嵌套下拉列表样式使用layui的template功能,先创建一个下拉列表:scrip...

weixin_42110469的博客 2421

3小时构建企业级Web应用:Layui组件库的完整开发实践

还在为复杂的现代端框架学习曲线而烦恼吗?还在为快速交付企业级Web应用而焦虑吗?今天我要分享一个高效解决方案——Layui,这款遵循浏览器原生开发模式的Web UI组件库,能够帮助开发团队在极短时间内构建出专业级的企业应用界面。作为一款零学习成本的经典组件库,Layui端开发回归简单,让企业应用开发效率提升300%! 想象一下这样的场景:产品经理突然要求三天内完成一个完整的数据管理系统,包

gitblog_01164的博客 916

表单数据验证方法(一)—— 使用validate.js实现表单数据验证

摘要:使用validate.js在端实现表单数据提交的验证   好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术,但能起到巩固自己和稍微帮助一下和我一样的菜鸡也是不错的,哈哈,不好意思,闲话扯多了。   今天想把之学的表单验证的方法复习一遍,因为明天的工作中要用到,而且好久没复习了,都快忘记了。  ...

CherishTheYouth的博客 398

如何用Layui解决传统端框架过度复杂化的挑战

在当今端开发领域,随着Vue、React等现代化框架的普及,项目构建复杂度呈指数级增长。技术决策者面临着一个两难选择:要么接受繁琐的构建工具链和陡峭的学习曲线,要么放弃现代UI组件的便利性。Layui作为一套遵循浏览器原生态开发模式的Web UI组件库,为这一困境提供了优雅的解决方案。它通过纯HTML/CSS/JavaScript技术栈,让开发者无需构建工具即可快速构建专业级Web界面,特别适合

gitblog_01037的博客 1082
上一篇: 高德地图Amap搜索定位
下一篇: Dapper数据库字段和model属性映射
Zdelta
博客等级 码龄10年 22粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值