iview自定义表单验证 多表单同时验证 阿星小栈

一、自定义验证

   

 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里面是待验证数组