Element-ui中自定義表單校驗規則

先看一個場景圖：

給一個標籤el-tag添加表單的校驗，且在內容有了之後關閉校驗

看代碼：

          <el-form-item class="baseinfo-tags" label="服務包標籤：" prop="tags">
            <el-tag
              class="tag"
              :key="tag"
              v-for="tag in baseInfo.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" :disabled="baseInfo.tags.length == 3" size="mini" @click="showInput">+ 新建標籤</el-button>
            <span class="tag-num">{{baseInfo.tags.length}}/3個</span>
          </el-form-item>

　　爲表單添加校驗

      baseInfoRules: {
        tags: [
          {
            trype: 'array', validator: validateTags, required: true, message: '請選擇至少一個標籤', trigger: 'change'
          }
        ],
      }, // 表單正則

　　添加自定義正則：

 

 隨後須要在標籤有了之後將校驗關閉：

    // 新增標籤 確認
    handleInputConfirm() {
      // xxx的操做
      this.$refs.baseInfoForm.validateField('tags'); // 再次校驗tag的正則
    },

　　隨後在點擊提交的時候進行正則判斷。在tag改變的時候進行該正則的關閉