【Bug】Uni-app自定义组件onReady(),v-if 渲染组件元素,无法获得

news/2024/7/10 1:47:56 标签: vue, uni-app

解决方案: v-if 改为v-show v-if 会移除元素的,当然获取不到,v-show只是display:none

validateFunction 自定义校验规则使用说明

  • uni-forms 的 rules 基础规则有时候不能满足项目的所有使用场景,这时候可以使用 validateFunction 来自定义校验规则
  • validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ,当然返回参数名开发者可以自定义:
    • rule : 当前校验字段在 rules 中所对应的校验规则
    • value : 当前校验字段的值
    • data : 所有校验字段的字段和值的对象
    • callback : 校验完成时的回调,一般无需执行callback,返回true(校验通过)或者false(校验失败)即可 ,如果需要显示不同的

EerrMessage
,如果校验不通过需要执行 callback(‘提示错误信息’),如果校验通过,执行callback()即可
注意 需要注意,如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则,这时候需要通过ref,在onReady生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定义验证规则无效。

案例

<uni-forms ref="form" v-if="repairFormShow" v-model="form" border>
		
    <uni-forms-item v-if="form.requirePay" label="paid" name="paid">
        <view style="flex: 1;">
        <myp-input v-model="form.paid" :maxlength="50" type="number" placeholder="请输入"
        	border="none" height="l" @input="setPaidValue('paid',form.paid)" />
        </view>
    </uni-forms-item>
 </uni-forms>
 
 paid: {
    rules: [{
        required: true,
        errorMessage: '请输入值',
    }, {
    validateFunction: function(rule, value, data, callback) {
    
        if (value > data.total) {
        	callback('请输入小于total的值');
        }
        return true;
        }
        }]
    }
 
 onReady() {
    // 需要在onReady中设置规则
    this.$refs.form.setRules(this.rules)
		},

在这里插入图片描述

注意:表单验证中尽量不使用this,无法将本地的this对象传入其中,如果出现必要则直接使用 @input=“setPaidValue(‘paid’,form.paid)” @input方法

binddata(name,value){
//通过 input 事件设置表单指定 name 的值
this.$refs.form.setValue(name, value)
},


http://www.niftyadmin.cn/n/1095620.html

相关文章

《深入理解Java虚拟机》学习笔记1-内存数据区域

1.程序计数器作用-较小的内存空间&#xff0c;用于存储当前线程所执行的字节码的行号特性-每条线程有需要一个独立的程序计数器&#xff0c;各线程间互不影响&#xff0c;独立存储&#xff0c;称为"线程私有"的内存2.Java虚拟机栈-程序员口中的"栈"作用-描…

HTTP学习笔记7-消息报头

41&#xff0c;消息报头-实体报头 请求和响应消息可以传送一个实体。一个实体由实体报头域和实体正文组成&#xff0c;在大多数情况下&#xff0c;实体正文就是请求消息中的请求正文或者响应消息中的响应正文。但是在发送时&#xff0c;并不是说实体报头域和实体正文要在一起发…

c++的os文件读写

一、写入console&#xff08;文件读取流&#xff09; #include <fstream> #include <string> #include <iterator>using namespace std;int main() {// 文件读取数据流ifstream is(路径, ios::in); // 或者 is.open() 打开文件// ios::in &#xff1a;向 c…

IOS第九天(1:QQ聊天界面frame模型)

/// 控制层 #import "HMViewController.h" #import "HMMessageModel.h" #import "HMMessageCell.h" #import "HMMessageFrameModel.h" interface HMViewController ()<UITableViewDataSource,UITableViewDelegate>property (no…

C/C++学习的50个经典网站

C/C是最主要的编程语言。这里列出了50名优秀网站和网页清单&#xff0c;这些网站提供c/c源代码。这份清单提供了源代码的链接以及它们的小说明。我已尽力包括最佳的C/C源代码的网站。这不是一个完整的清单&#xff0c;您有建议可以联系我&#xff0c;我将欢迎您的建议&#xff…

win10 系统如何设置环境变量

第一种&#xff1a; 第二种&#xff1a; 在这里输入环境变量 之后按照上述步骤修改path即可

为什么数据库要有主键

主键&#xff1a; 概念 主关键字&#xff08;主键&#xff0c;primary key&#xff09;是被挑选出来&#xff0c;作表的行的惟一标识的候选关键字。一个表只有一个主关键字。主关键字又可以称为主键。 主键可以由一个字段&#xff0c;也可以由多个字段组成&#xff0c;分别成…

关于MySQL count(distinct) 逻辑的一个bug【转】

本文来自&#xff1a;http://dinglin.iteye.com/blog/1976026#comments 背景 客户报告了一个count(distinct)语句返回结果错误&#xff0c;实际结果存在值&#xff0c;但是用count(distinct)统计后返回的是0。将问题简化后复现如下&#xff0c;影响已知的所有版本。 这里的 set…