layui表单提交前数据检验

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` 组件时,如果某些表单项被设置为隐藏状态但仍需阻止其参与验证过程,则可以通过调整这些字段的状态来实现这一目标。具体来说,在 JavaScript 中动态控制哪些字段应该跳过验证逻辑是一个有效的方法。 对于希望排除特定条件下的输入框不做必填校验的情况,可以在定义验证规则之先判断该元素是否处于可见状态。如果是不可见(即通过 CSS 设置了 display:none 或 visibility:hidden),则临时移除它的验证属性;反之亦然。下面给出了一种可能的技术路线: #### 方法一:基于显示/隐藏切换修改验证规则 ```javascript // 假设有一个名为 'hiddenField' 的 input 被隐藏起来了 var hiddenInput = document.querySelector('#hiddenField'); if (window.getComputedStyle(hiddenInput).display === 'none') { // 如果这个input是隐藏着的, 移除它的验证规则 layui.form.verify({ removeHiddenRules: function(value){ return true; } }); delete layui.form.config.verify['required']; // 清楚原有的必填验证 } else { // 否则恢复默认行为并重新加载配置 layui.form.render(); } ``` 这种方法的核心在于利用 `layui.form.verify()` 来定制化处理那些不应该触发验证机制的情形,并且适时更新全局或局部的验证设定以适应界面变化的需求[^1]。 #### 方法二:直接操作 DOM 属性 另一种更为简单粗暴的方式就是直接操纵 HTML 元素上的 `lay-verify` 属性——当某个控件变为不可见时就将其删除,从而让对应的验证器失效;而一旦它再次变得可视,则立即还原此标记以便恢复正常工作流程。 ```html <!-- 初始状态下 --> <input type="text" id="myHiddenInput" name="example" lay-verify="required"> <script> let myElement = document.getElementById('myHiddenInput'); if (!isElementVisible(myElement)) { // 自定义函数用于检测元素是否可见 myElement.removeAttribute('lay-verify'); // 删除验证属性使该项不再强制要求填写 } function isElementVisible(el) { var style = window.getComputedStyle(el); return style.display !== "none"; } </script> ``` 这种方式虽然直观易懂但也存在局限性,比如可能会破坏原有页面结构的一致性和可维护性。因此建议仅作为应急手段考虑[^2]。 #### 方法三:自定义过滤器配合事件监听 更优雅的做法可能是创建一个专门针对这种情况设计的数据预处理器或者中间件层,每当有新的提交请求发出都会经过这里做一次筛选清洗动作,确保最终传递给服务器端的信息都是干净有效的。这不仅有助于简化端业务逻辑还能提高整体系统的健壮程度。 ```javascript layui.use(['form'], function(){ let form = layui.form; // 添加 submit的钩子函数 form.on('submit(*)', function(obj){ Object.keys(obj.field).forEach(function(key){ if ($(document.getElementsByName(key)).css('visibility') == 'hidden'){ delete obj.field[key]; // 将隐藏域从待发送数据集中剔除出去 } }); console.log(JSON.stringify(obj.field)); // 输出清理后的参数列表 return false; // 防止实际提交发生 }); }); ``` 上述代码片段展示了如何遍历所有即将提交数据条目,并依据它们关联的实际 UI 控制组件当样式决定保留还是丢弃相应键值对。值得注意的是这里的 `return false;` 是为了防止真实环境中不必要的网络交互测试期间可以去掉这句话允许正常流转[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值