首页 > 其他分享 >关于uniapp表单验证(uview)的坑

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

时间:2023-04-30 15:45:33浏览次数:37  
标签:uniapp 绑定 setRules 验证 rules refs uview 表单 onReady

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保证执行成功

标签:uniapp,绑定,setRules,验证,rules,refs,uview,表单,onReady
From: https://www.cnblogs.com/yangshiyi/p/17365352.html

相关文章

  • 动态增加表单方法--ff/ie
    ---------------------增加方法----------------------------<h3><center>批量增加评论</center></h3><BR><formaction=""method="post"οnsubmit="returncheck_form();"><inputtype="button"va......
  • uniapp android app 铃声静音,真正的免打扰
    需要加入这个权限:<uses-permissionandroid:name=\"android.permission.ACCESS_NOTIFICATION_POLICY\"/>代码:/***设置铃声为静音,媒体音量不变(免打扰)**/setDisturb(){//#ifd......
  • document.forms[0],得不到文本框的值,没错误提示的错误,表单提交
    我测试错误信息,可是我明明往文本框里输入值了,却告诉我没输入值,还不报错,我就找原因,检查了好几遍,也没找出错误,最后定位在document.forms[0],因为我的一个jsp里有好几个form表单,我那个得不到值的是最后一个表单,第4个,我就把document.forms[0]改成了document.forms[......
  • uniapp-小程序
    使用uniapp开发小程序遇到的坑:使用uni-swipe-action-item左右滑动会报错swiperaction.closeOtherisnotafunction   :auto-close="autoClose"设置false,不启用自动关闭功能;:show="item.isShow"这个属性来控制关闭开启,这样即可关闭使用uni-group进行分段(可能其他场景也......
  • uniapp脚手架项目抖音小程序中使用了uView框架中的IndexList 索引列表组件报错uni.req
    解决办法如果您是vue-cli模式的项目,还需要在项目根目录的vue.config.js文件中进行如下配置://vue.config.js,如没有此文件则手动创建module.exports={transpileDependencies:['uview-ui']}......
  • element-ui中多个表单el-form进行显示/隐藏切换时校验失效
    问题描述:当一个弹窗或页面中含有多个表单(都需要校验),且需要进行显示/隐藏切换时,容易造成切换后的表单元素的校验失效。如下: 第一个表单的输入框都触发blur提示语后,切换至第二个表单第二个表单的输入框触发blur后,第一个输入框的校验失效了。返回后,第一个输入框触发blur,校验......
  • Go Web学习笔记--处理表单的输入
    通过一个注册的示例来演示如何通过Go语言来处理表单的输入。首先,创建一个简单的html文件,代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><formaction="/log......
  • uniapp button样式置空
    小程序转发,得用button,样式太丑了, <viewclass="one"> <buttondata-name="shareBtn"open-type="share"hover-class="none"> <imagesrc="/static/index/carddetail/sendcard.png"></image&g......
  • 第二十七章:表单处理
    学习要点:1.表单介绍2.文本框脚本3.选择框脚本为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。一.表单介绍在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了H......
  • uniapp 动态修改 css 样式
    css使用var注入变量,达到设置动态样式的需求声明css变量时,变量名前面要加两根连词线(--);变量使用kebab-case命名方式,即--header-color而不是--headerColor;变量名大小写敏感,--header-color和--Header-Color是两个不同的变量名;var()函数用于读取变量。接下来,看......