iview自定义表单验证 &&& 多表单同时验证

Posted 2020-11-01 tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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)

　此时ref里面是待验证数组

 

  

 

以上是关于iview自定义表单验证 &&& 多表单同时验证的主要内容，如果未能解决你的问题，请参考以下文章

iview中Modal弹窗做form表单验证相关问题

iview表单验证--数字必填+校验

表单验证自定义二选一

AngularJS 自定义表单验证指令在我的模式中不起作用

iview的自定义表单校验，valid显示undefined

Angular 2 自定义表单输入