标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。
首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。
然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。
首先是循环表单项没有加验证之前的代码:
<template> <div class="content-body"> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-row :gutter="10"> <el-col :span="12" :offset="0"> <el-form-item label="套餐名称:" prop="activityName" id="activityName"> <el-input v-model="form.activityName"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="12"> <el-form-item label="状态:"> <el-radio v-model="form.status" label="1">上线</el-radio> <el-radio v-model="form.status" label="0">下线</el-radio> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="2" style="width:120px;"> <div class="sub-title">梯度设置:</div> </el-col> <el-col :span="20"> <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index"> <el-col :span="6"> <el-form-item label="商品数量:"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="优惠价格:"> <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="4"> <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i> <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i> </el-col> </el-row> </el-col> </el-row> <el-form-item size="medium" class="div-submit"> <el-button @click="resetForm('form')">取消</el-button> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> /* eslint-disable */ export default { data() { return { form: { activityName: '', status: '1', productGroup: [{num:"",price:""}] }, rules: { activityName: [ { required: true, message: '请输入套餐名称', trigger: 'blur' } ] } } }, methods: { deleteLadder(index) { if(this.form.productGroup.length>1){ this.form.productGroup.splice(index,1); } }, addLadder() { this.form.productGroup.push({num:"",price:""}); }, submitForm(formName) { console.log("activityName...",this.form.activityName); this.$refs[formName].validate((valid,obj) => { if (valid) { this.submitFormAction(); } else { this.$message.error("验证不通过"); } }); }, submitFormAction() { this.$message.success("提交成功"); }, resetForm(formName) { this.$refs[formName].resetFields(); this.form.productGroup = [{num:"",price:""}]; } } } </script> <style> .el-form-item { margin-bottom: 20px; } </style>
首先是添加rules规则,这个和正常添加规则一样:
productGroupRules: { productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}], productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}] }
然后给表单项添加验证,以商品数量为例:
<el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item>
注意这里: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循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
v-for循环组件,组件key都是同一个固定值,组件还会被重新创建吗 v-for循环组件,内部组件每次的生命周期都是从beforeCreated开始的吗
本文向大家介绍Vue中使用vee-validate表单验证的方法,包括了Vue中使用vee-validate表单验证的方法的使用技巧和注意事项,需要的朋友参考一下 Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jq
本文向大家介绍在vue中使用v-for,如何控制循环的次数?相关面试题,主要包含被问及在vue中使用v-for,如何控制循环的次数?时的应答技巧和注意事项,需要的朋友参考一下 问题分vue2和vue3 vue2由于v-for优先级高于v-if,所以推荐使用计算属性控制长度 vue3由于v-if优先级高于v-for,可以使用v-if控制长度,当然还是推荐使用计算属性
本文向大家介绍Vue element-ui父组件控制子组件的表单校验操作,包括了Vue element-ui父组件控制子组件的表单校验操作的使用技巧和注意事项,需要的朋友参考一下 方法一: 父组件代码: //子组件代码 补充知识:vue element-ui表单验证无效解决方案 在写页面的时候用到的element-ui库中的表单验证 出现如下问题 表单验证效果已有 但验证功能不正确。 检查与对照官
本文向大家介绍解决vue v-for 遍历循环时key值报错的问题,包括了解决vue v-for 遍历循环时key值报错的问题的使用技巧和注意事项,需要的朋友参考一下 一 、问题如下: non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key。 :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的。
本文向大家介绍bootstrap 表单验证使用方法,包括了bootstrap 表单验证使用方法的使用技巧和注意事项,需要的朋友参考一下 前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。 一、源码及API地址 介绍它之前,还是给出它