标签：解决办法 arr name 验证 遇到 表单 modal true iview

写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程中遇到的问题。

1、Modal关闭问题

需求背景：modal框里面是个form表单，点击确定之后，先验证form表单，验证通过则关闭modal框，验证不成功则提示用户，不关闭。

问题描述：本来刚开始想通过modal框v-model绑定的值（true或false）来进行控制，手动改之后，报错。

解决办法：

       官方iview的modal组件的api里面有个loading属性，可通过控制loading的值来进行控制modal的显示。

       举例说明：

     注意： refuseLoading刚开始一定要设置为true。

   这样的话就可以解决问题了。

   衍生出来的问题：当关闭模态框之后，再次打开时，表单数据没有重置，还是上一次的数据。

   解决办法：this.$refs[name].resetFields();    重置表单数据，在关闭模态框的时候调用这个方法可解决。

2、同时验证多个表单问题

需求背景：一个页面有多个表单，提交的时候需要验证多个表单，都验证成功才能进行下一步操作

解决办法：用一个数组来存放每个表单的验证结果(true验证通过，false验证不通过)，最后循环这个数组如果值都为true，说明验证通过。

               举例说明：页面有3个表单，需要同时验证，主要代码如下：

<template>
    <div class="hello">
        <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate1.name" placeholder="Enter your name"></Input>
            </FormItem>
        </Form>
        <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate2.name" placeholder="Enter your name"></Input>
            </FormItem>
        </Form>
        <Form ref="formValidate3" :model="formValidate3" :rules="ruleValidate">
            <FormItem label="Name" prop="name">
                <Input v-model="formValidate3.name" placeholder="Enter your name"></Input>
            </FormItem>
        </Form>
        <Button @click="submit">提交</Button>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                formValidate1: {
                    name: ''
                },
                formValidate2: {
                    name: ''
                },
                formValidate3: {
                    name: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ]
                },
                arr: []
            }
        },
        methods: {
            check(name){  // 验证表单是否通过
                this.$refs[name].validate((valid) => {
                    if(valid) {
                        this.arr.push(true);  // arr 这个数组是用来存放单个表单的验证状态
                    } else {
                        this.arr.push(false);
                    }
                })
            },
            submit(){  // 提交
                this.arr = [];  // 重置数组
                // 同时验证多个表单
                this.check('formValidate1');
                this.check('formValidate2');
                this.check('formValidate3');
                var flag = null;
                for(var i = 0; i < this.arr.length; i++) {
                    if(this.arr[i]) { // 单个表单验证通过，继续验证下个表单
                        flag = true;
                        continue;
                    } else { // 单个表单验证不通过，结束
                        flag = false;
                        break;
                    }
                }
                if(flag){  // 验证表单成功
                    alert("验证成功");
                }else{
                    alert("验证失败")
                }
            }
        }
    }
</script>

<style scoped></style>

标签：解决办法,arr,name,验证,遇到,表单,modal,true,iview
来源： https://www.cnblogs.com/yanxulan/p/10407029.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。