VUE-Antd开发,validate规则校验第一次为空,后面无论怎么输入都显示不可为空
问题描述#
场景是修改弹窗,给数据赋值,其中数据有String 和 Array
第一次操作 多选框(数据类型是Array)输入为空并在输入框外点击,显示不可为空。
之后无论怎么输入都显示不可为空。(当你控制台输出校验value时,会发现里面的值永远是第一次操作的数据,而非为空)
可能原因#
1️⃣rules 定义出错#
比如 rules没有定义type是array格式,默认是String
或者 trigger只定义了blur,没定义change
尽可能的使用自定义的格式校验,问题基本出在Array类型上,String类型范围比较少遇到这种情况
解决代码:
data (){
function validateType (rule, value, callback) {
if (value.length < 1) {
callback(new Error('类别不能为空'))
} else {
callback()
}
}
return {
form:{
type:[]
}
rules: {
type: [{ type: 'array',validator: validateType, trigger: ['blur','change'] }],//validateType是自定义的
},
}
}
2️⃣在第一次操作前有不正当的赋值#
这里String类型赋值不会有啥问题(神奇,希望有大佬解答)
但是Array类型直接=赋值,会有问题,需要$set赋值
错误代码:
this.type = ['1','2']
解决的正确代码:
this.$set(this.form,'type',['1','2'])
总结#
在validate校验规则的时候,当遇到数组的时候需要特别注意和规范,不然很可能造成空值也会逃过校验规则的情况
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!