快捷導(dǎo)航

vue中view-design的校驗(yàn)及閉坑指南

更新時(shí)間：2026年02月21日 09:05:53 作者：k0933

文章總結(jié)了async-validator文檔中校驗(yàn)不通過(guò)的原因,主要是由于type類(lèi)型不匹配,文章詳細(xì)列舉了不同類(lèi)型數(shù)據(jù)（如number、array等）的校驗(yàn)方法,并提供了具體的示例,感興趣的朋友一起看看吧

async-validator文檔
有值但校驗(yàn)不通的原因：大概率是type的類(lèi)型不對(duì) 。因?yàn)楸韱涡ｒ?yàn)時(shí)，不填type,默認(rèn)string類(lèi)型，如果值是number類(lèi)型，需要在校驗(yàn)中加入 type: ‘number’，如果值是array類(lèi)型，需要在校驗(yàn)中加入 type: ‘array’，等等

1、DatePicker日期

      <FormItem prop="userWorkDate">
            <DatePicker
              type="date"
              :readonly="!isEditor"
              placeholder="請(qǐng)選擇"
              v-model="addlist.userWorkDate"
            ></DatePicker>
          </FormItem>
       userWorkDate: [
          {
            required: true,
            message: '參加工作時(shí)間不能為空',
            trigger: 'change',
            type: 'date', // 重點(diǎn)
          },
        ],

1、Cascader 級(jí)聯(lián)選擇

        <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', // 重點(diǎn)
            message: '籍貫不能為空',
            trigger: 'change',
          },
        ],

3、上傳組件upload-使用隱藏的Input進(jìn)行校驗(yàn)

          <MyEpUploader
            ref="basicInfo"
            :preview-custom="true"
            :target="target"
            @file-success="userHighDegreeAttach"
          />
          //重點(diǎn)--使用隱藏的Input進(jìn)行校驗(yàn)
          <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()
    }

4、身份證號(hào)的校驗(yàn)

          <FormItem prop="userCardNumber">
            <Input
              :readonly="!isEditor"
              v-model="addlist.userCardNumber"
              placeholder="身份證號(hào)限制18位，X限制大寫(xiě)"
            />
          </FormItem>
      userCardNumber: [
          { required: true, validator: validateIdCard, trigger: 'blur' },
        ]
      // 身份證號(hào)正則校驗(yàn)
    const validateIdCard = (rule, value, callback) => {
      if (!value) {
        this.addlist.userBirth = ''
        return callback(new Error('身份證號(hào)不能為空'))
      }
      // 身份證號(hào)簡(jiǎn)單校驗(yàn)：18位，18位最后一位是X
      const idCardReg = /^(\d{17}[\dX])$/
      if (!idCardReg.test(value)) {
        this.addlist.userBirth = ''
        return callback(new Error('請(qǐng)輸入有效的身份證號(hào)'))
      } 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))
        // 校驗(yàn)?zāi)暝氯?
        if (month < 1 || month > 12) {
          this.addlist.userBirth = ''
          return callback(new Error('身份證號(hào)中月份無(wú)效'))
        }
        // 校驗(yàn)日期
        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('身份證號(hào)中日期無(wú)效'))
        }
      }
      // 驗(yàn)證通過(guò)后，嘗試解析出生年月
      this.parseBirthFromIdCard(value)
      callback()
    }

5、手機(jī)號(hào)的校驗(yàn)

       <FormItem prop="userPhone">
            <Input
              :readonly="!isEditor"
              v-model="addlist.userPhone"
              placeholder="請(qǐng)輸入手機(jī)號(hào)"
            />
          </FormItem>
      userPhone: [
          { required: true, validator: validatePhone, trigger: 'blur' },
        ]
       // 手機(jī)號(hào)正則校驗(yàn)
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手機(jī)號(hào)不能為空'))
      }
      // 簡(jiǎn)單的手機(jī)號(hào)格式校驗(yàn)：11位數(shù)字，以1開(kāi)頭
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('請(qǐng)輸入有效的手機(jī)號(hào)'))
      }
      callback()
    }

6、動(dòng)態(tài)嵌套表單校驗(yàn)

      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="請(qǐng)選擇"
                v-model="item.startTime"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col class="bg ct" span="3">考核結(jié)果</Col>
          <Col span="9" class="p-5 ct">
            <FormItem
              :prop="'annualAssess.' + index + '.result'"
              :key="'annualAssess.' + index + '.result'"
              :rules="{
                required: true,
                message: '考核結(jié)果不能為空',
                trigger: 'change',
              }"
            >
              <Select
                :disabled="!isEditor"
                v-model="item.result"
                placeholder="請(qǐng)選擇"
              >
                <Option
                  v-for="(item, index) in cangongkaoheOPtion"
                  :key="index"
                  :value="item.value"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
      </FormItem>
   </Form>

到此這篇關(guān)于vue中view-design的校驗(yàn)及閉坑指南的文章就介紹到這了,更多相關(guān)vue view-design校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: