vue中view-design的校验及闭坑指南
作者：k0933
文章总结了async-validator文档中校验不通过的原因,主要是由于type类型不匹配,文章详细列举了不同类型数据（如number、array等）的校验方法,并提供了具体的示例,感兴趣的朋友一起看看吧
async-validator文档
有值但校验不通的原因：大概率是type的类型不对 。因为表单校验时，不填type,默认string类型，如果值是number类型，需要在校验中加入 type: ‘number’，如果值是array类型，需要在校验中加入 type: ‘array’，等等
1、DatePicker日期
<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 级联选择
<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进行校验
<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、身份证号的校验
<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、手机号的校验
<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、动态嵌套表单校验
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>到此这篇关于vue中view-design的校验及闭坑指南的文章就介绍到这了,更多相关vue view-design校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！