vue中view-design的校验及闭坑指南

      <FormItem prop="userWorkDate">
            <DatePicker
              type="date"
              :readonly="!isEditor"
              placeholder="请选择"
              v-model="addlist.userWorkDate"
            ></DatePicker>
          </FormItem>
       userWorkDate: [
          {
            required: true,
            message: '参加工作时间不能为空',
            trigger: 'change',
            type: 'date', // 重点
          },
        ],

        <FormItem prop="userNative">
            <Cascader
              :disabled="!isEditor"
              :data="CascaderData"
              :render-format="format"
              v-model="addlist.userNative"
              @on-change="changeArea"
            ></Cascader>
          </FormItem>
      userNative: [
          {
            required: true,
            type: 'array', // 重点
            message: '籍贯不能为空',
            trigger: 'change',
          },
        ],

          <MyEpUploader
            ref="basicInfo"
            :preview-custom="true"
            :target="target"
            @file-success="userHighDegreeAttach"
          />
          //重点--使用隐藏的Input进行校验
          <FormItem prop="userHighDegreeAttach">
            <Input v-show="false" v-model="addlist.userHighDegreeAttach" />
          </FormItem>
         userHighDegreeAttach: [
          {
            required: true,
            trigger: 'change',
            validator: validateUplaod,
          },
        ]
    const validateUplaod = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('附件不能为空'))
      }
      callback()
    }

          <FormItem prop="userCardNumber">
            <Input
              :readonly="!isEditor"
              v-model="addlist.userCardNumber"
              placeholder="身份证号限制18位，X限制大写"
            />
          </FormItem>
      userCardNumber: [
          { required: true, validator: validateIdCard, trigger: 'blur' },
        ]
      // 身份证号正则校验
    const validateIdCard = (rule, value, callback) => {
      if (!value) {
        this.addlist.userBirth = ''
        return callback(new Error('身份证号不能为空'))
      }
      // 身份证号简单校验：18位，18位最后一位是X
      const idCardReg = /^(\d{17}[\dX])$/
      if (!idCardReg.test(value)) {
        this.addlist.userBirth = ''
        return callback(new Error('请输入有效的身份证号'))
      } else {
        // 提取出生年月日
        const birthStr = value.substr(6, 8) // 19800101
        const year = parseInt(birthStr.substr(0, 4))
        const month = parseInt(birthStr.substr(4, 2))
        const day = parseInt(birthStr.substr(6, 2))
        // 校验年月日
        if (month < 1 || month > 12) {
          this.addlist.userBirth = ''
          return callback(new Error('身份证号中月份无效'))
        }
        // 校验日期
        const date = new Date(year, month - 1, day)
        if (
          date.getFullYear() !== year ||
          date.getMonth() + 1 !== month ||
          date.getDate() !== day
        ) {
          this.addlist.userBirth = ''
          return callback(new Error('身份证号中日期无效'))
        }
      }
      // 验证通过后，尝试解析出生年月
      this.parseBirthFromIdCard(value)
      callback()
    }

       <FormItem prop="userPhone">
            <Input
              :readonly="!isEditor"
              v-model="addlist.userPhone"
              placeholder="请输入手机号"
            />
          </FormItem>
      userPhone: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ]
       // 手机号正则校验
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      }
      // 简单的手机号格式校验：11位数字，以1开头
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('请输入有效的手机号'))
      }
      callback()
    }

      formDynamic: {
        annualAssess: [
          {
            startTime: '',
            result: '',
            status: 1,
          },
        ],
      },
    <Form
      class="form info-form"
      ref="formDynamic"
      :model="formDynamic"
    >
    <FormItem
        class="inner-item"
        :class="{ border: item.status }"
        v-for="(item, index) in formDynamic.annualAssess"
        :key="'annualAssess' + index"
      >
        <Row class="form-btn-list">
          <Button
            type="primary"
            :key="'annualAssessadd.' + index"
            v-if="isEditor && formDynamic.annualAssess.length - 1 === index"
            @click="handleAddResult"
            >新增</Button
          >
          <Button
            v-if="isEditor && formDynamic.annualAssess.length !== 1"
            type="error"
            :key="'annualAssessdelete.' + index"
            @click="handleRemoveResult(index)"
            >删除</Button
          >
        </Row>
        <Row class="border-top">
          <Col class="bg ct border-bot" span="3">年度</Col>
          <Col span="9" class="ct p-5">
            <FormItem
              :prop="'annualAssess.' + index + '.startTime'"
            >
              <DatePicker
                type="year"
                :readonly="!isEditor"
                placeholder="请选择"
                v-model="item.startTime"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col class="bg ct" span="3">考核结果</Col>
          <Col span="9" class="p-5 ct">
            <FormItem
              :prop="'annualAssess.' + index + '.result'"
              :key="'annualAssess.' + index + '.result'"
              :rules="{
                required: true,
                message: '考核结果不能为空',
                trigger: 'change',
              }"
            >
              <Select
                :disabled="!isEditor"
                v-model="item.result"
                placeholder="请选择"
              >
                <Option
                  v-for="(item, index) in cangongkaoheOPtion"
                  :key="index"
                  :value="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </FormItem>
   </Form>