vue使用Element组件时v-for循环里的表单项验证方法

标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。

成都创新互联公司是专业的凤县网站建设公司,凤县接单;提供做网站、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行凤县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码:




首先是添加rules规则,这个和正常添加规则一样:

productGroupRules: {
 productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
 productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]
}

然后给表单项添加验证,以商品数量为例:


 

注意这里:rules是每个表单项都要添加,有多个的话用productGroupRules.productGroupNum这样的形式区分,对应上面productGroupRules里的内容。

另外主要就是:prop了,注意正常验证表单项是prop,而这里是:prop
:prop="'productGroup.'+index+'.num'"是拼接的形式,前面是v-for绑定的数组,中间是数组索引index,最后是表单项绑定的v-model的名称,然后用点.把它们连接起来。这三项都必须保证正确,错一个都无法验证。

另外就是要注意,v-for绑定的数组也必须绑定在form对象里,注意上面的data里:

form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
}
如果是:

form: {
 activityName: '',
 status: '1'
},
productGroup: [{num:"",price:""}]

是无法验证的,这一点也要注意。

好了,以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


分享文章:vue使用Element组件时v-for循环里的表单项验证方法
网站路径:http://azwzsj.com/article/peiddg.html