解决vue3中使用个别form表单校验失灵

当我点击校验时 其他都有触发校验 唯独radio没有触发,绑定都没有问题

 看一下代码 

const data = reactive({form: {},rules: {serverStatus: [{ required: true, message: "服务状态不能为空", trigger: 'change' }],tenantName: [{ required: true, message: "租户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "长度必须于 2 至 20 字符之内", trigger: "blur" }],loginAccount: [{ required: true, message: "登录账号不能为空", trigger: "blur" }],contactPerson: [{ required: true, message: "联系人不能为空", trigger: "blur" }, { min: 5, max: 20, message: "长度必须于 5 至 20 字符之内", trigger: "blur" }],tenantAddress: [{ required: true, message: "公司地址不能为空", trigger: "blur" }, { message: "请输入正确的公司地址", trigger: "blur" }],contactIphone: [{ required: true, message: "联系电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的联系电话号码", trigger: "blur" }],tenantDomain: [{ required: true, message: "域名不能为空", trigger: "blur" }, { pattern: /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/, message: "请输入正确的域名", trigger: "blur" }],}
});const { form, rules } = toRefs(data);

当我把form通过ref或者reactive定义在外面的时候 表单校验就可以成功了 

注意的是 如果要对reactive重新赋值  会丢失原来响应式对象的引用地址  变成一个新的引用地址   这个新的引用地址指向的对象是没有经过 reactive 方法处理的 可以选择包裹一个对象

const form = reactive ({  data:{ }  })

也可以使用 Object.assign(from,  res.data) 来进行处理 

 const resetForm = reactive({ ...form })  Object.assign(form, resetForm); 这样子可以快速清空数据

如果使用包裹对象的方法 再配合ts的时候 

单独写一个ts文件

//1.定义限制userData的接口
export interface dataRule{name:string,age:number
}//写类
export class Form{//定义userData并且做TS限制和赋初始值data:dataRule={name:"",age:""}
}--------------------------------------------------------
使用let form=reactive(new Form());
form.data=//来进行复制

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

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

相关文章

Spring高手之路6——Bean生命周期的扩展点:BeanPostProcessor

文章目录 1. 探索Spring的后置处理器(BeanPostProcessor)1.1 BeanPostProcessor的设计理念1.2 BeanPostProcessor的文档说明 2. BeanPostProcessor的使用2.1 BeanPostProcessor的基础使用示例2.2 利用BeanPostProcessor修改Bean的初始化结果的返回值2.3 …

途乐证券|有色金属板块崛起涨超2%,云南锗业两连板

周三(7月5日),A股三大股指震荡整理。截至上午收盘,上证指数跌幅达0.51%,报3228.68点;深证成指和创业板指跌幅分别为0.53%和0.59%;沪深两市合计成交额5310.1.6亿元,总体来看,两市个股跌多涨少。 …

使用Stable Diffusion生成艺术二维码

在数字艺术的世界中,二维码已经从单纯的信息承载工具转变为可以展示艺术表达的媒介。这是通过使用Stable Diffusion的技术实现的,它可以将任何二维码转化为独特的艺术作品。接下来,我们将一步步教你如何使用Stable Diffusion生成艺术二维码。…

【备战秋招】每日一题:2022.11.3-华为机试-去除多余空格

为了更好的阅读体检,可以查看我的算法学习网 在线评测链接:P1058 题目描述 塔子哥最近接到导师的一个任务,需要他帮忙去除文本多余空格,但不去除配对单引号之间的多余空格。给出关键词的起始和结束下标,去除多余空格后刷新关键词…

【JavaScript】ES6新特性(5)

16. Promise Promise 是异步编程的一种解决方案,比传统的解决方案回调函数, 更合理和更强大 ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象 指定回调函数方式更灵活易懂解决异步 回调地狱 的问题 16.1 回调地狱 当一个回调函数…

并发编程 - Event Bus 设计模式

文章目录 Pre设计CodeBus接口自定义注解 Subscribe同步EventBus异步EventBusSubscriber注册表RegistryEvent广播Dispatcher 测试简单的Subscriber同步Event Bus异步Event Bus Pre 我们在日常的工作中,都会使用到MQ这种组件, 某subscriber在消息中间件上…

AIGC - Stable Diffusion 的 AWPortrait 1.1 模型与 Prompts 设置

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/131565908 AWPortrait 1.1 网址:https://www.liblibai.com/modelinfo/721fa2d298b262d7c08f0337ebfe58f8 介绍:AWPortrai…

使用LiteSpeed缓存插件将WordPress优化到100%的得分

页面速度优化应该是每个网站所有者的首要任务,因为它直接影响WordPress SEO。此外,网站加载的时间越长,其跳出率就越高。这可能会阻止您产生转化并为您的网站带来流量。 使用正确的工具和配置,缓存您的网站可以显着提高其性能。因…

Spring系列3 -- 更简单的读取和存储对象

前言 上一篇章总结了,Spring的创建与使用,通过创建Maven项目配置Spring的环境依赖,创建Spring框架的项目,然后通过在Resource目录下创建Spring-config.xml配置文件,添加<bean></bean>标签将我们需要的bean对象注入到容器中,然后通过ApplicationContext获取Spring上…

web服务端接收多用户并发上传同一文件,保证文件副本只存在一份(附go语言实现)

背景 对于一个文件服务器来说&#xff0c;对于同一文件&#xff0c;应该只保存一份在服务器上。基于这个原则&#xff0c;引发出本篇内容。 本篇仅阐述文件服务器在同一时间接收同一文件的并发问题&#xff0c;这种对于小体量的服务来说并不常见&#xff0c;但是最好还是要留…

文本分析-使用Python做词频统计分析

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【滑动窗口】209. 长度最小的子数组

209. 长度最小的子数组 解题思路 滑动窗口设置前后指针滑动窗口内的元素之和总是大于或者等于s滑动窗口的起始位置: 如果窗口的值大于等于s 窗口向前移动窗口结束位置:for循环的j class Solution {public int minSubArrayLen(int target, int[] nums) {int left 0;// 滑动窗口…