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

需求是这样的,有多项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' }], // 品牌

        }

    }

}

相关内容

热门资讯

餐饮界吹起“山野风”,90%都... 部分图片来源网络,如有侵权请告知删除 作者丨刘卫芳 尊重原创,拒绝一切未经授权的转载 近两年湘菜赛道...
原创 上... 标题:上汤百叶包——简单美味的江南小菜 在江南的小巷深处,有一种味道,它轻柔地拂过味蕾,让人忍不住...
原创 今... 今天是农历五月初九日,民间多个传统习俗广为流传。农历五月初九是广东增城著名的宾公佛(牛仔佛)诞辰,是...
你吃的“咸味”食物 可能比可乐... 你知道吗?你每天可能在不经意间,就吃下了几十颗方糖——而且它们很可能不是来自甜食。你以为只要不喝可乐...
端午家宴不发愁!8道家常好菜荤... 端午佳节,家人团聚,一场温馨的家宴必不可少。以下为你带来8道家常好菜的详细做法,荤素搭配,让一家老小...