Element-ui 中对表单进行验证
Element-ui 中对表单(Form)绑定的对象中的对象属性进行校验
如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "或者''
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | < template > < div class="about"> < el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> < el-form-item label="活动名称" prop="name"> < el-input v-model="ruleForm.name"></ el-input > </ el-form-item > < el-form-item label="活动区域" prop="region"> < el-select v-model="ruleForm.region" placeholder="请选择活动区域"> < el-option label="区域一" value="shanghai"></ el-option > < el-option label="区域二" value="beijing"></ el-option > </ el-select > </ el-form-item > // 注意这里 < el-form-item label="活动形式" prop="activity.type"> < el-input v-model="ruleForm.activity.type"></ el-input > </ el-form-item > < el-form-item > < el-button type="primary" @click="submitForm('ruleForm')">立即创建</ el-button > < el-button @click="resetForm('ruleForm')">重置</ el-button > </ el-form-item > </ el-form > </ div > </ template > < script > export default { data() { return { ruleForm: { name: '', region: '', activity:{ type:"" } }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], // 注意这里 "activity.type": [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], } } }, methods:{ submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } }, } </ script > |
原文链接:https://blog.csdn.net/ZYS10000/article/details/107179238/
vue使用Element组件时v-for循环里的表单项验证方法
Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了。
然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法,我们通过查找解决方案和实际验证,总结出来解决方法如下。
首先是循环表单项没有加验证之前的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | < 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规则,这个和正常添加规则一样:
1 2 3 4 | productGroupRules: { productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}], productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}] } |
然后给表单项添加验证,以商品数量为例:
1 2 3 | < 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里:
1 2 3 4 5 6 7 8 9 10 11 | form: { activityName: '', status: '1', productGroup: [{num:"",price:""}] } 如果是: form: { activityName: '', status: '1' }, |
productGroup: [{num: "" ,price: "" }] |
是无法验证的,这一点也要注意。
好了,以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构