Vue2: Form in elementUI adds and deletes dynamic rules under certain circumstances

Look at the requirements first: (If you don’t want to see it, just pull it to the end)

 【Statement of needs】

6. If the status is on the shelf, the inventory is required, and when it is off the shelf, the inventory is optional, and there is no asterisk in front

Implementation method: use this.$set() and this.$delete()

Above code:

Due to commercial privacy by design, only part of the code is uploaded:
 

<el-form :model="commodityForm" ref="commodityForm" :rules="rules" label-width="120px">
      
        其他字段......

        <el-form-item label="上下架状态" prop="status">
          <el-switch
            v-model="commodityForm.status"
            :active-value="1"
            :inactive-value="0"
            @change="switchChange"
            >
          </el-switch>
        </el-form-item>
      </el-form>

The original rules in the form data:

      // 表单校验
      rules:{
        name: [{ required: true, message: "请输入商品名称", trigger: ['blur','change']}],
        title: [{ required: true, message: "请输入商品标题", trigger: ['blur','change']}],
        commodityFormImg:[{ required: true, message: '请上传商品图片', trigger: 'change'}],
        typeId: [{ required: true, message: '请选择所属分类', trigger: 'change'}],
        brandId: [{ required: true, message: '请选择商品品牌', trigger: 'change'}],
        specification: [{ required: true, message: '请选择商品规格', trigger: ['blur','change']}],
        sellingPrice: [{ required: true, message: '请输入销售价', trigger: ['blur','change']}],
        // stock: [{ required: true, message: '请输入库存', trigger: ['blur','change']}],
        detail: [
          { required: true, message: "商品详情不能为空", trigger: "blur" },
          { validator: validateEditor, trigger: 'blur,change' }
        ]
      },

Do not add rules for the status of the off-shelf

Judging in the change event: the key method is here! ! ! ! ! ! ! ! ! !

    // 上下架开关事件
    switchChange(e) {
       if(e != 1) {
        //删除校验的关键的两行代码（两行都要！！！！！！！！！！！！！！！）
        // 这个只能删除文字提示，但是星号还在,
        this.$refs["commodityForm"].clearValidate(["stock"]);
        // 这个只能删除星号提示，但是文字还在
        this.$delete(this.rules,'stock');
       }else{
         //添加校验代码（！！！！！！！！！！！！！！！）
        this.$set(this.rules,'stock',[{ required: true, message: '请输入库存', trigger:      
         ['blur','change']}])
       }
    }

Dynamically add and delete rules

2023-1-29 Two more new methods:

 <el-form-item label="库存" prop="stock" :rules="commodityForm.status == 1 ? { required: true, message: '请输入库存', trigger: ['blur','change']} : {}">
          <el-input v-model.trim="commodityForm.stock" @input="commodityForm.stock = commodityForm.stock.replace(/[^\d]/g, '')" size="small" placeholder="请输入库存"></el-input>
        </el-form-item>

Thanks to my good colleague for teaching me how to do things hahaha

 :rules="commodityForm.status == 1 ? { required: true, message: 'Please enter inventory', trigger: ['blur','change']} : {}"

At the same time, the code in the method remains one:

   switchChange(e) {
       if(e != 1) {
        this.$refs["commodityForm"].clearValidate(["stock"]);
       }
    }