iview自定義表單驗證 多表單同時驗證 阿星小棧

1、自定義驗證

   

 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}
                    ]
                }
            };
        },

 

2、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裏面是待驗證數組