async-validator文档
有值但校验不通的原因：大概率是type的类型不对 。因为表单校验时，不填type,默认string类型，如果值是number类型，需要在校验中加入 type: 'number' ，如果值是array类型，需要在校验中加入 type: 'array'，等等
1、DatePicker日期
javascript
<FormItem prop="userWorkDate">
<DatePicker
type="date"
:readonly="!isEditor"
placeholder="请选择"
v-model="addlist.userWorkDate"
></DatePicker>
</FormItem>
userWorkDate: [
{
required: true,
message: '参加工作时间不能为空',
trigger: 'change',
type: 'date', // 重点
},
],1、Cascader 级联选择
javascript
<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',
},
],3、上传组件upload-使用隐藏的Input进行校验
javascript
<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()
}4、身份证号的校验
javascript
<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()
}5、手机号的校验
javascript
<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()
}6、动态嵌套表单校验
javascript
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>