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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

day 0815

计算文件有多少行&#xff1f; 2.文件的拷贝

Java中有哪些可以用于日期和时间的API?

从Java 8开始&#xff0c;java.time包提供了新的日期和时间API&#xff0c;新增的API严格区分了时刻、本地日期、本地时间&#xff0c;并且&#xff0c;对日期和时间进行运算更加方便。主要涉及的类型有以下几类&#xff1a; LocalDate&#xff1a;不包含具体时间的日期。 Lo…

ArcGIS入门操作手册

一.ArcGIS安装过程 参考本人博客&#xff1a;保姆级Arcgis安装图文安装教程_追忆苔上雪的博客-CSDN博客 二.ArcGIS植被指数计算 (1)使用工具&#xff1a;栅格计算器 打开软件&#xff0c;右侧搜索栅格计算器打开&#xff0c;要是搜索栏不小心叉掉找不到了&#xff0c;可以通…

初识结构体

文章目录 目录1. 结构体类型的声明1.1 结构的基础知识1.2 结构的声明1.3 结构成员的类型1.4 结构体变量的定义和初始化 2. 结构体成员的访问3. 结构体传参 目录 结构体类型的声明结构体初始化结构体成员访问结构体传参 1. 结构体类型的声明 1.1 结构的基础知识 结构是一些值的…

可白嫖的4家免费CDN,并测试其网络加速情况(2023版)

网站加载速度优化过程中&#xff0c;不可避免的会用上CDN来加速资源的请求速度。但是市面上的CDN资源几乎都是要收费的&#xff0c;而且价格还不便宜&#xff0c;对于小公司站长来讲&#xff0c;这将是一笔不小的开销。不过还是有一些良心公司给我们提供了免费的资源&#xff0…

私密相册管家-加密码保护私人相册照片安全

App Store史上最安全、最强大、最卓越的私密相册App&#xff01;再也不用担心私密照片视频被别人看见了&#xff01;
私密相册为你提供多重密码保护机制、简单便捷的照片存储空间&#xff0c;完美地将你的私密照片远离一切恶意偷窥者的窥探&#xff01; 【产品功能】
 √ 支…

【Pytorch:nn.Embedding】简介以及使用方法:用于生成固定数量的具有指定维度的嵌入向量embedding vector

文章目录 1、nn.Embedding2、使用场景 1、nn.Embedding 首先我们讲解一下关于嵌入向量embedding vector的概念 1&#xff09;在自然语言处理NLP领域&#xff0c;是将单词、短语或其他文本单位映射到一个固定长度的实数向量空间中。嵌入向量具有较低的维度&#xff0c;通常在几…

两天入门Linux、搭建Spring环境 第一天

一、Linux简介 1.什么是Linux 一个操作系统&#xff0c;未来公司里面会用到、接触的新操作系统。 2.为什么学Linux (1)个人职务需要&#xff0c;肯定会接触到Linux (2)职业发展&#xff0c;以后的发展肯定需要掌握Linux的许多使用方法 3.学哪些内容 (1)Linux基本介绍 (2)…

Prometheus入门

Prometheus(普罗米修斯) 是一种 新型监控告警工具,Kubernetes 的流行带动了 Prometheus 的应用。 全文参考自 prometheus 学习笔记(1)-mac 单机版环境搭建[1] Mac 上安装 Prometheus brew install prometheus 安装路径在 /usr/local/Cellar/prometheus/2.20.1, 配置文件在 /usr…

Qt 之 QPushButton,信号与槽机制

文章目录 前言一、QPushButton二、信号与槽机制总结 前言 一、QPushButton 当我们开发基于Qt框架的图形用户界面&#xff08;GUI&#xff09;应用程序时&#xff0c;经常需要在界面上添加按钮来实现用户交互。Qt提供了一个名为 QPushButton 的类作为按钮控件的实现。QPushButt…

题解 | #1002.Shortest path# 2023杭电暑期多校9

1002.Shortest path 签到题 记忆化搜索 题目大意 给定一个正整数 n n n &#xff0c;可以对其进行以下操作&#xff1a; 如果 n n n 能被 3 3 3 整除&#xff0c;则可以使 n n / 3 nn/3 nn/3 ;如果 n n n 能被 2 2 2 整除&#xff0c;则可以使 n n / 2 nn/2 nn/2 …

探索Java中的静态变量与实例变量:存储区域、生命周期以及内存分配方式的区别

文章目录 静态变量实例变量不可变对象静态变量和实例变量有什么区别&#xff1f;静态变量实例变量 Object 类都有哪些公共方法&#xff1f;Java 创建对象有哪几种方式&#xff1f;ab 与 a.equals(b) 有什么区别&#xff1f;总结 &#x1f389;欢迎来到Java面试技巧专栏~探索Jav…

贝锐蒲公英:快速搭建连锁门店监控体系,赋能企业高效管理

随着国民生活水平的提高和零售场景的变革&#xff0c;消费者对于餐饮类目的消费支出不断增加&#xff0c;线下社区生鲜商超作为下沉市场最主要的消费场景之一&#xff0c;蕴藏着巨大价值机会。 对于线下连锁生鲜超市而言&#xff0c;连锁门店多、员工多&#xff0c;门店管理时会…

如何使用CSS实现一个响应式网格布局?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式网格布局⭐ 设置基本的HTML结构⭐ 创建基本的CSS样式⭐ 添加媒体查询以实现响应式效果⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端…

【Vue-Router】路由传参

1. query 传参 list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水","price":400,"id": 2},{"name": "菜","price":500,"…

C#质检工具(StyleCop、SonarLint)

1、StyleCop StyleCop工具主要类似java中的checkStyle,是检查代码样式规范的工具。 1.1、StyleCop安装流程: 图1.1 图1.2 图1.3 安装StyleCop插件时可能会遇到下载特慢或卡住不动的情况,需注意: 1)网上说的关闭IPV6功能不管用 2)网上说的自动指定dns不管用 3)网上…

Qt应用开发(基础篇)——滚屏区域基类 QAbstractScrollArea

一、前言 QAbstractScrollArea滚屏区域抽象类继承于QFrame&#xff0c;QFrame继承于QWidget&#xff0c;是QListview(列表浏览器)、QTableview(表格浏览器)、QTextEdit(文本编辑器)、QTextBrowser(文本浏览器)等所有需要滚屏区域部件的抽象基类。 框架类QFrame介绍 QAbstractSc…

软件工程概述-架构师(三)

软件工程概述&#xff08;老版&#xff09; 软件开发生命周期&#xff1a; 软件定义时期&#xff1a;包括 可行性研究和详细需求分析过程&#xff0c;任务是软件工程必需完成的目标&#xff0c;具有可行问题分析、可行性研究、需求分析等。软件开发时期&#xff1a;软件的 设…

11 - git stash 开发中临时加塞了紧急任务怎么处理

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 开发中临时加塞了紧急任务怎么处理 开发中临时加塞了紧急任务怎么处理 当你此时工作区已经修改了 Readme 文件&#xff0c;然后突然需要解决其他问题&#xff08;紧急问题、新任务&…

HbuildX生成安卓签名证书

HbuildX生成安卓签名证书 安装和配置JRE环境 根据此链接安装和配置JRE环境 生成签名证书 keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystoretestalias是证书别名&#xff0c;可修改为自己想设置的字符&#xff0c;建议…