uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

  • 问题代码
  • 官方说明
  • 参考资料

问题代码

直接从官方示例中复制过来改的。为了演示

<template><view><uni-forms ref="form" :modelValue="formData" :rules="rules"><uni-forms-item label="兴趣爱好" required name="hobby"><uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" /></uni-forms-item></uni-forms><button class="button" @click="submit">校验表单</button></view>
</template>
<script>
export default {data() {return {formData:{},rules: {hobby: {rules: [{validateFunction:function(rule,value,data,callback){if (value.length < 2) {callback('请至少勾选两个兴趣爱好')}return true}}]}}}},onReady() {this.$refs.form.setRules(this.rules)// 需要在onReady中设置规则},methods: {submit(form) {this.$refs.form.validate().then(console.log).catch(console.error)}}
}
</script>

官方说明

在这里插入图片描述
说了但好像又没说。。。
官方说了要在 onReady 绑定验证规则

onReady() {this.$refs.form.setRules(this.rules); // 需要在onReady中设置规则},

但我的实际代码是从另一个页面复制整个uni-forms 来改的。所以 :rules="rules" 就没有去掉。结果这就导致了 validateFunction 只有在第一次调用 this.$refs.form.validate() 有效。
注意: 使用 validateFunction 时:

  1. onReady 绑定验证规则。
  2. 去掉 uni-forms 上的 :rules="rules"。(如果有的话)

疑惑:
onReady:rules="rules" 不能正常工作,为啥不抛个异常出来?
为啥又能触发一次,来迷惑人呢。。。唉。。

参考资料

组件名:uni-forms

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/62096.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TensorFlow】P0 Windows GPU 安装 TensorFlow、CUDA Toolkit、cuDNN

Windows 安装 TensorFlow、CUDA Toolkit、cuDNN 整体流程概述TensorFlow 与 CUDA ToolkitTensorFlow 是一个基于数据流图的深度学习框架CUDA 充分利用 NIVIDIA GPU 的计算能力CUDA Toolkit cuDNN 安装详细流程整理流程一&#xff1a;安装 CUDA Toolkit步骤一&#xff1a;获取CU…

opencv基础53-图像轮廓06-判断像素点与轮廓的关系(轮廓内,轮廓上,轮廓外)cv2.pointPolygonTest()

点到轮廓的距离 在 OpenCV 中&#xff0c;函数 cv2.pointPolygonTest()被用来计算点到多边形&#xff08;轮廓&#xff09;的最短距离&#xff08;也 就是垂线距离&#xff09;&#xff0c;这个计算过程又称点和多边形的关系测试。该函数的语法格式为&#xff1a; retval cv2…

多路复用select实现

select函数 int select(int nfds, fd_set *readfds,fd_set *writefds,fd_set *exceptfds, struct timeval *timeout);nfds:是三个集合中编号最高的文件描述符&#xff0c;加上1readfds/writefds/exceptfds: 可读集合/可写集合/异常集合timeout NULL&#xff1a;永久阻塞0&…

flink kafka消费者如何处理kafka主题的rebalance

背景&#xff1a; 我们日常使用kafka客户端消费kafka主题的消息时&#xff0c;当消费者退出/加入消费者组&#xff0c;kafka主题分区数有变等事件发生时&#xff0c;都会导致rebalance的发生&#xff0c;此时一般情况下&#xff0c;如果我们不自己处理offset&#xff0c;我们不…

Android Studio实现滑动图片验证码

源代码链接 效果&#xff1a; MainActivity package com.example.slidingpattern;import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.Moti…

photoshop生成器引入到electron项目(electron与photoshop建立通信)

Photoshop引入了nodejs&#xff0c;在启动的时候&#xff0c;通过pipe调起nodejs运行时核心generator-builtin&#xff0c;通过KLVR机制与ps进行通信和交互&#xff0c;同时会加载用户编写的扩展。 这里记录一下引入时的踩坑过程 generator-core就是它的源码&#xff0c;elect…

栈和队列(二) 队列操作详解及栈与队列的相互实现

文章目录 四、队列1、什么是队列2、队列的基本操作Queue.hQueue.c初始化队列队尾入队列队头出队列获取队列头部元素获取队列队尾元素获取队列中有效元素个数检测队列是否为空&#xff0c;如果为空返回非零结果&#xff0c;如果非空返回0销毁队列 五、设计循环队列六、栈与队列的…

整数中1出现的次数(从1到n整数中1出现的次数)

解题思路1&#xff1a; 设定整数点&#xff08;如1、10、100等等&#xff09;作为位置点i&#xff08;对应n的各位、十位、百位等等&#xff09;&#xff0c;分别对每个数位上有多少包含1的点进行分析。 第一步&#xff1a;对n进行分割&#xff0c;分为两部分&#xff1a;高位…

标准化归一化 batch norm, layer norm, group norm, instance norm

Layer Normalization - EXPLAINED (in Transformer Neural Networks) Layer Normalization - EXPLAINED (in Transformer Neural Networks) 0~4min:什么是multi-head attention 5~7min:layer norm图示 7~9min:公式举例layer norm 9:54-end:layer norm的代码示例 group n…

Redis安装配置远程连接

1. yum 安装 redis&#xff1a; 直接使用命令&#xff0c;将 redis 安装到 linux 服务器中&#xff1a; yum -y install redis 2. 启动 redis&#xff1a; 在 xshell 里&#xff0c;可以使用下面命令&#xff0c;以后台方式启动 redis&#xff1a; [rootVM-8-17-centos /]…

【李宏毅机器学习·学习笔记】Tips for Training: Batch and Momentum

本节课主要介绍了Batch和Momentum这两个在训练神经网络时用到的小技巧。合理使用batch&#xff0c;可加速模型训练的时间&#xff0c;并使模型在训练集或测试集上有更好的表现。而合理使用momentum&#xff0c;则可有效对抗critical point。 课程视频&#xff1a; Youtube&…

# X11、Xlib、XFree86、Xorg、GTK、Qt、Gnome和KDE之间的关系

X11、Xlib、XFree86、Xorg、GTK、Qt、Gnome和KDE之间的关系 很多人对于他们是啥是傻傻分不清的&#xff0c;我做了个表格供大家参考。 摘抄&#xff1a; X11是X Window System Protocol, Version 11&#xff08;RFC1013&#xff09;&#xff0c;是X server和X client之间的通…