标签：err 9.png highlight art 表单验证 view 多表 turn als
一、自定义验证
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)
此时ref里面是待验证数组
标签：err 9.png highlight art 表单验证 view 多表 turn als
原文地址：https://www.cnblogs.com/dereckbu/p/8921050.html
