多个el-tab共用一个表单校验问题
创始人
2024-06-03 20:17:27
0

需求是这样的,有多项tab,切换不同的tab,显示的输入框是一样的,但有的tab需要必填,有的tab则不需要必填。效果图如下:(带星号和不带星号)

 

       

                v-for="item in 6"

                :key="item"

                :label="item"

                :name="item"

                style="width: 150px"

        >

            

             

             

        

        

             

        

        

              

                   

               

        

   data() {

const checkBrandRules = (rule, value, callback) => {

      if (!value || value === '' || !this.addGoodsForm.brandNorules)  {

        callback()

      } else if (!this.checks.text.norText.test(value)) {

        callback(new Error('品牌只能输入:中英文数字'))

      }

      return callback()

    }

    const checkBrand = (rule, value, callback) => {

      if (value === '' || !this.addGoodsForm.brand) {

        return callback(new Error('请输入品牌'))

      } else {

        this.addGoodsForm.brand = this.addGoodsForm.brand.trim()

        if (this.addGoodsForm.brand.length < 1) {

          return callback(new Error('品牌最少需要输入1个字符'))

        } else if (!this.checks.text.norText.test(value)) {

          callback(new Error('品牌只能输入:中英文数字'))

        }

        return callback()

      }

    }

    return {

        rules: {

            brandNorules: [{ required: false, validator: checkBrandRules, trigger: 'blur' }], // 品牌

            brand: [{ required: true, validator: checkBrand, trigger: 'blur' }], // 品牌

        }

    }

}

相关内容

热门资讯

育碧GDC2018程序化大世界... 1.传统手动绘制森林的问题 采用手动绘制的方法的话,每次迭代地形都要手动再绘制森林。这...
编译原理陈火旺版第三章课后题答... 下面答案仅供参考! 1.编写一个对于 Pascal 源程序的预处理程序。该程序的作用是...
MacBookPro M2芯片... MacBookPro M2芯片下如何搭建React-Native环境目录软件下载环境配置 目录 写在...
Android studio ... 解决 Android studio 出现“The emulator process for AVD ...
pyflink学习笔记(六):... 在pyflink学习笔记(一)中简单介绍了table-sql的窗口函数,下面简单介绍下...
创建deployment 创建deployment服务编排-DeploymentDeployment工作负载均衡器介绍Depl...
gma 1.1.4 (2023... 新增   1、地图工具    a. 增加【GetWorldDEMDataSet】。提供了一套 GEO...
AI专业教您保姆级在暗影精灵8... 目录 一、Stable Diffusion介绍    二、Stable Diffusion环境搭建 ...
vue笔记 第一个Vue应用 Document{{content}}{{...
Unity自带类 --- Ti... 1.在Unity中,自己写的类(脚本)的名字不能与Unit...
托福口语21天——day5 发... 目录 一、连读纠音 二、语料输入+造句输出 三、真题 一、连读纠音 英语中的连读方式有好几种...
五、排序与分页 一、排序 1、语法 ORDER BY 字段 ASC | DESC ASC(ascen...
Linux系统中如何安装软件 文章目录一、rpm包安装方式步骤:二、deb包安装方式步骤:三、tar....
开荒手册4——Related ... 0 写在前面 最早读文献的时候,每每看到related work部分都会选择性的忽略&...
实验01:吃鸡蛋问题 1.实验目的: 通过实验理解算法的概念、算法的表示、算法的时间复杂度和空间复杂度分析&...
8个免费图片/照片压缩工具帮您... 继续查看一些最好的图像压缩工具,以提升用户体验和存储空间以及网站使用支持。 无数图像压...
Spring Cloud Al... 前言 本文小新为大家带来 Sentinel控制台规则配置 相关知识,具体内容包括流控...
多项目同时进行,如何做好进度管... 多项目同时进行,如何做好进度管理? 大多数时候,面对项目进...
ATTCK红队评估实战靶场(二... 前言 第二个靶机来喽,地址:vulunstack 环境配置 大喊一声我...
【MySQL基础】3—多表查询 ⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTr...