关于uniapp表单验证(uview)的坑

uniapp 在验证表单 出现this.$refs.uForm.setRules(this.rules) Error in onReady hook: "TypeErr的错误。

在web h5在上,就会容易错误,语句比较严格。

出现this.$refs.uForm.setRules(this.rules) Error in onReady hook: "TypeErr的的原因是在onReady写两条初始化验证

onReady() {
            this.$refs.uForm.setRules(this.form.rules); //setRules方法绑定验证规则
            this.$refs.uForm2.setRules(this.form.rules); 
        }

通常会类似分步填表单的需求,会分表单,所以会出现多条绑定需要,但这样获报错所以解决办法:

复制代码
watch: {
            show: {//你的绑定属性
                handler(value) {
                    this.$nextTick(() => {//回调延迟到下次 DOM 更新循环之后执行
                        if (value == true) { 
                            this.$refs.uForm2.setRules(this.form.rules);
                        }
                    })
                },
            },
            immediate: true, //初始handler
            deep: true, //开启深度监听,多级属性
        }
复制代码

加入一个监听器监听绑定值变化后再初始绑定验证,当然也可以在控流程中判断后再初始绑定验证后再验证

还有一个问题使用$refs可能失效,可以用回调延迟nextTick保证执行成功

posted @   闲时一点  阅读(2187)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示