首页 > 其他分享 >VUE-Antd开发,validate规则校验第一次为空,后面无论怎么输入都显示不可为空

VUE-Antd开发,validate规则校验第一次为空,后面无论怎么输入都显示不可为空

时间:2023-04-09 14:11:20浏览次数:40  
标签:VUE String 校验 为空 Antd Array type 赋值

问题描述

场景是修改弹窗,给数据赋值,其中数据有StringArray

第一次操作 多选框(数据类型是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校验规则的时候,当遇到数组的时候需要特别注意和规范,不然很可能造成空值也会逃过校验规则的情况

标签:VUE,String,校验,为空,Antd,Array,type,赋值
From: https://www.cnblogs.com/luoyugongxi/p/17300265.html

相关文章

  • ant-design-vue日历面板 a-calendar 属性自定义设置
    通过自定义属性设置,实现一个周末与工作日的不同颜色设置效果图: 使用的属性:自定义头部设置headerRender自定义日期显示dateFullCellRender代码:<template><divclass="box"><h3>1.自定义头部;2.自定义日期显示,工作日显示,周末显示</h3><a-c......
  • 将Vue项目部署到Tomcat服务器上(简单、粗暴)
    1.将项目打包Vue中自带webpack,可以通过一行命令将项目打包#执行该命令打包npmrunbuild2.上传相应文件到服务器上打包完成后,项目中会多出一个dist文件夹,这个文件夹中就包含html、css、js等文件直接将dist文件夹上传到Tomcat的ROOT目录下,默认情况下,访问服务器网址......
  • Vue常用指令
    常用指令指令:HTML标签上带有V-前缀的特殊属性,不同指令具有不同含义。常用指令指令作用v-bind为HTML标签绑定属性值,如设置href,css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素,判定为true时渲染,否则不......
  • html页面里面的button标签使用@click属性时,无法定位到Vue的method里面
    问题解决就很离谱,都是按照网上的教程来的,一直无法定位,之后跟着加上了div标签,加上了id属性,方法还是灰白色,调用不了;后来直接将el属性名称更改掉了,没想到这样就成功识别到了,反正就是逻辑没有出问题,最后也达到期望值了。......
  • vscode 开发 vue3项目 , src 别名 为 @ ,报错
    https://geekdaxue.co/read/me-note@vue/mydm8l需要设置basicURL然后就生效了{"compilerOptions":{//设置解析非相对模块名称的基本目录"baseUrl":".",//设置模块名到基于baseUrl的路径映射,可以设置路径别名的语法提示"paths":{"@/*......
  • vue2源码-一、rollup环境配置
    npminit-y创建初始化package.json并修改script为"dev":"rollup-cw"安装rollup及其插件:npminstallrolluprollup-plugin-babel@babel/core@babel/preset-env--save-dev创建rollup.config.js对rollup进行配置:配置如下:importbabelfrom'rollup-plugin-bab......
  • 记录-VueJs中如何使用Teleport组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助了解排序算法的优缺点和适用场景是非常重要的,因为在实际开发中,需要根据实际情况选择最合适的排序算法。不同的排序算法适用于不同的场景,有的算法适用于小规模的数据集,有的算法适用于大规模的数据集,有的算法适用于......
  • 在Vue中使用键盘事件,回调函数被执行两次
    暂时先不考虑v-for的key,查看下面的代码<template><div><[email protected]="addTask"><span>请输入待办事项:</span><inputtype="text"placeholder="请输入..."v-model="text"@keyup.enter=&qu......
  • vue-router传参问题
    //字符串路径router.push('/users/eduardo')//带有路径的对象router.push({path:'/users/eduardo'})//命名的路由,并加上参数,让路由建立urlrouter.push({name:'user',params:{username:'eduardo'}})//带查询参数,结果是/register?plan=privat......
  • Vue进阶(四十九):在Webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能
    在webapp上使用input:file,指定capture属性调用默许相机,摄像,录音功能。在webapp上使用input:file,指定capture属性调用默认相机,摄像,录音功能在iOS6下开发webapp,使用input之file,很有用<inputtype="file"accept="image/*"capture="camera"><inputtype="file"acce......