Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验_第1张图片刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验_第2张图片

			
				
					
						"  :rules="[{required: true, message: '必填'}]"A prop="ksrqs">
						
						
					
					
						
							
						
					
					
						<@s.message code ='ACTION.REMOVE'/>
					
				
			

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验_第3张图片

					let arr = [];
					for (var i=0;i {
							if (valid) {
								arr.push(true);
							} else {
								arr.push(false);
							}
						});
					}
					let flag = arr.every((item) => {
						console.log('item',item)
						return item === true;
					});
					if (flag) {
						self.$Modal.confirm({
							title: i18n('MODEL.CONFIRM_TITLE'),
							content: i18n('MODEL.CONFIRM_CONTENT'),
							//loading: true,
							okText: i18n('MODEL.CONFIRM_OK_TEXT'),
							cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),
							onOk: function()  {

							},
							onCancel: function() {
								self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});
							}
						});
					} else {
						self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});
					}

你可能感兴趣的:(javascript,前端,vue.js,前端,javascript)