关于#前端#的问题：elementUI的form表单，我想去效验身份证的多种证件，该如何写才能根据证件类型进行证件号的效验

elementUI的form表单，我想去效验身份证的多种证件，该如何写才能根据证件类型进行证件号的效验？

就是，当我选择了香港证件，会去rule效验是不是香港身份证，每种证件我都会去效验。怎么统一的写？

试过这种的，但是没有用，不会去效验上。有没有会的友友帮助一下

<template>
  <div>
    <el-form
      :model="addData"
      :rules="rules"
      label-width="120px"
      style="text-align: left; margin-top: 2%"
    >
      <el-form-item label="选择证件：">
        <el-select
          v-model="addData.value"
          placeholder="请选择"
          @change="changValue"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码：" prop="num">
        <el-input v-model="addData.num" placeholder="请输入内容"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      addData: {
        value: "",
        num: "",
      },
      options: [
        {
          value: 1,
          label: "居民身份证",
        },
        {
          value: 2,
          label: "香港身份证",
        },
      ],
      rules: {
        num: [
          {
            required: true,
            message: "请输入证件号",
          },
        ],
      },
    };
  },
  methods: {
    changValue() {
      switch (this.addData.value) {
        case 1:
          this.rules.num = [
            {
              required: true,
              pattern:
                /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
              message: "请输入正确的身份证",
              trigger: "blur",
            },
          ];
          console.log(this.rules.num);
          break;
        case 2:
          this.rules.num = [
            {
              required: true,
              pattern: /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/,
              message: "请输入正确的香港身份证",
              trigger: "blur",
            },
          ];
          console.log(this.rules.num);
          break;
        default:
          break;
      }
    },
  },
};
</script>

类似我这样写啊，是利用callback的

模拟一下

<template>
  <el-form :model="ruleForm">
    <el-form-item label="证件类型" prop="type">
      <el-select v-model="ruleForm.type" placeholder="请选择活动区域">
        <el-option label="居民身份证" value="id"></el-option>
        <el-option label="香港身份证" value="id_hk"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="证件号码" prop="no" :rules="rules.type[ruleForm.type]">
      <el-input v-model="ruleForm.no"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      ruleForm: {
        type: 'id',
        no: ''
      },
      rules: {
        type: {
          id: [
            {required: true, message: '请输入证件号码', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          id_hk: [
            {required: true, message: '请输入证件号码', trigger: 'blur'},
            {min: 6, max: 9, message: '长度在 6 到 9 个字符', trigger: 'blur'}
          ]
        }
      }
    }
  }
};
</script>