关于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保证执行成功
分类:
杂谈
, JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具