【Element-UI】實現表單聯動校驗

這里以證件號和證件類型為例

1. 表單元素

        <el-form-item label="證件類型：" prop="identifyType" :error="errorTypeInfo">
          <el-select v-model.trim="baseInfo.identifyType" placeholder="請選擇證件類型" @change="typeChange"
                     :disabled="noInput">
            <el-option
                v-for="item in identifyList"
                :key="item.label"
                :label="item.value"
                :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="證件號：" prop="identifyNo" v-if="level === '0'">
          <el-input class="uppercase" v-model.trim="baseInfo.identifyNo" placeholder="請輸入證件號" maxlength="32" clearable></el-input>
        </el-form-item>

 2. 證件號的校驗

輸入證件號校驗證件類型這里用了：error ，也可以直接$refs的validateField（）去校驗

 

let checkIdCard = function (rule, value, callback) {
        if (value) {
          if (!vm.baseInfo.identifyType) {
            vm.errorTypeInfo = '請選擇證件類型';
            return false
          }
          let type = vm.baseInfo.identifyType;
          if (type === '01' || type === '02') {
            vm.noInputBirth = true;
            let result = checkUtil.checkIDNum(value);
            if (result === '0') {
              callback(new Error('請輸入正確的證件號'));
            } else {
              // 身份證 自動獲取出生和性別
              vm.baseInfo.birthday = getBirthdayFromIdCard(value);
              vm.baseInfo.sex = getGenderFromIdCard(value);
              callback();
            }
          } else {
            vm.noInputBirth = false;
            if (checkUtil.checkIdentifyNum(type, value) === 'success') {
              callback();
            } else {
              callback(new Error('請輸入正確的證件號'));
            }
          }
        } else {
          return callback(new Error('請輸入證件號'));
        }
      }

 

 3. 證件類型的校驗

 

      let checkIdType = (rule, value, callback) => {
        if (!value) {
          callback(new Error('請選擇證件類型'))
        } else {
          let type = vm.baseInfo.identifyType
          if (type === '01' || type === '02') {
            vm.noInputBirth = true;
          } else {
            vm.noInputBirth = false;
          callback()
        }
      }