动态表单数据验证 vue

idCard: [{ validator: (rule, value, callback) => {
          if (this.idCardVif === 'idCard') {
            this.validateIdCard(rule, value, callback)
          } else {
            this.validRequired(rule, value, callback)
          }
        },

<tcHeader required width="100px">证件号码</tcHeader>
              <FormItem prop="idCard"></FormItem>
              <!--<FormItem prop="idCardInput" class="idCardInput" v-if="idCardVif === 'idCardInput'"></FormItem>-->
              <tcContent style="width: calc(100% - 100px);">
                <inputZen max
                          v-if="idCardVif === 'idCardInput'"
                          @on-blur="valiFormItemHandle('idCard')"
                          v-model="formData.idCard" placeholder="" :maxlength="50"/>

                <id-card
                  v-if="idCardVif === 'idCard'"
                  @on-change="valiFormItemHandle('idCard')"
                  v-model="formData.idCard"
                  border="border-width:0"></id-card>
              </tcContent>

data () {
    return {
      idCardVif: 'idCard', // 身份证组件 和 input 组件 来回切换 idCard idCardInput