一、自定义验证
data () {
const validateSectionFileType = (rule, value, callback) => {
if (value <= 0) {
callback(new Error('类型不能为空'));
} else {
callback();
}
};
const validateSectionTime = (rule, value, callback) => {
if (value === '') {
callback(new Error('时间不能为空'));
} else {
callback();
}
};
const validateSectionDuration = (rule, value, callback) => {
if (!value) {
callback(new Error('时间不能为空'));
} else {
callback();
}
};
const validateSectionIsFree = (rule, value, callback) => {
if (value === '') {
callback(new Error('请选择是否收费'));
} else {
callback();
}
};
return {
ruleEditSection: {
title: [
{required: true, message: '小节标题不能为空', trigger: 'blur'}
],
subTitle: [
{required: true, message: '小节副标题不能为空', trigger: 'blur'}
],
duration: [
{ required: true,type: Number, message: '请填写持续时间', trigger: 'blur', validator: validateSectionDuration},
],
startTime: [
{ required: true,message: '请选择开始时间',type: String , trigger: 'change', validator: validateSectionTime},
],
sectionDesc: [
{ required: true,required: true, message: '小节介绍不能为空', trigger: 'blur'}
],
type: [
{ required: true,message: '请选择类型',type: Number | String, trigger: 'change', validator: validateSectionFileType},
],
sectionUrl: [
{required: true, message: '文件不能为空', trigger: 'change'}
],
isFree: [
{ required: true, message: '请选择是否免费',type: Number | String, trigger: 'blur', validator: validateSectionIsFree}
]
}
};
},
二、v-for 多表单同时验证
<div class="form-item width-95" v-for="(section, index) in sectionLists">
<Card>
<Form :label-width="100" ref="sectionLists" :model="section" :rules="ruleEditSection">
<FormItem label="小节标题" class="width-24" prop="title">
。。。。。。
</FormItem>
</Form>
</Card>
</div>
for (let i = 0; i < this.sectionLists.length; i++) {
let validateStatus = false;
this.$refs['sectionLists'+i].validate((valid)
if (!validateStatus) {
console.log(i)
return false;
}
}
this.$refs[].validate((valid)
this.$refs[].validate((valid)
此时ref里面是待验证数组