vue+iview 实现v-for循环出来的多表单验证

最新推荐文章于 2023-09-25 14:57:35 发布

qq_37656005

最新推荐文章于 2023-09-25 14:57:35 发布

阅读量1.7k

点赞数

分类专栏： iview 文章标签： vue

本文链接：https://blog.csdn.net/qq_37656005/article/details/114020136

版权

iview 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue+IView框架下使用v-for循环来实现多表单的验证。首先展示了单个表单验证的基本方法，然后详细解释了在循环中动态绑定表单验证规则，并在`handleSubmit`方法中遍历每个表单进行验证，通过数组判断所有表单是否都通过验证，从而实现多表单的全部验证功能。

摘要由CSDN通过智能技术生成

vue+iview 实现v-for循环出来的多表单验证
单个表单验证就不多赘述了，很简单，方法如下

 <Form ref="formValidate" :model="formList" :rules="rulesValidate">  
 ......
 </Form>
 
 export default {
 data(){
        return{
        	formList:{
	          username: '',
	          password: ''
	        },
	         rulesValidate: {
	          username: [{required: true, message: '账号不能为空', trigger: 'blur'}],
	          password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
	        }
        }
  },
  methods: {
  	handleSubmit(){
   		this.$refs['formValidate'].validate((valid) => {
            if (valid) {
            	//验证通过
            }
        })
	}
  }
 }

那么用v-for循环实现的多表单的验证方法如何实现呢，具体实现方法如下

<div  v-for="(pItem,pIndex) in formList" :key="'pi' + pIndex" style="margin:5px 0;">
	<Form :ref="'formValidate' + pIndex" :model="pItem" :rules="rulesValidate">
	......
	</Form>
</div>

export default {
  data(){
        return{
        	formList:[
        		{name:'',age:''},
        		{name:'',age:''},
        		{name:'',age:''}
        	],
        	rulesValidate: {
	          name: [{required: true, message: '姓名不能为空', trigger: 'blur'}],
	          age: [{required: true, message: '年龄不能为空', trigger: 'blur'}]
	        }
        }
  },
  methods: {
  	handleSubmit(){
  		this.formList.forEach((item, index) => {
         let form = 'formValidate' + index;
         this.$refs[form][0].validate((valid) => {
           if (valid) {
             arr.push(true);
           } else {
             arr.push(false);
           }
         });
       });
       let flag = arr.every((item) => {
         return item === true;
       });
       if(flag){//全部为true,验证通过
         //验证通过
       }else{
         this.$Message.error('信息填写有误');
         return false;
       }
	}
  }
 }