转载至:https://www.jb51.net/article/142750.htm
标题描述看起来有些复杂,有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循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。

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

  

  

  

  

【vue】vue使用Element组件时v-for循环里的表单项验证方法的更多相关文章

  1. vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中 ...

  2. vue element 表单验证不通过,滚动到固对应位置

    我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮.这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置. ...

  3. 使用vue做表单验证

    <template> <Form ref="formInline" :model="formInline" :rules="rule ...

  4. vue 常用的表单验证,包括手机号码,固定电话和身份证...

    <template> <div> <pl-content-box> <pl-page-nav :show-previous=true></pl-p ...

  5. Element表单验证(1)

    Element表单验证(1) 首先要掌握Element官方那几个表单验证的例子,然后才看下面的教程. Element主要使用了async-validator这个库作为表单验证 async-valida ...

  6. 初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)

    表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" ...

  7. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

  8. vue构造函数(根实例化时和组件实例对象选项)参数:选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  9. Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

随机推荐

  1. bzoj1651

    题解: 前缀和维护 f[a]++,f[b+1]-- 然后F[i]+=f[i-1] 代码: #include<bits/stdc++.h> using namespace std; ; in ...

  2. RabbitMQ 简单的消息发送与接收

    RabbitMQ是建立在AMQP(Advanced Message Queuing Protocol,高级消息队列协议)基础上的,而AMQP是建立在TCP协议之上的. 因此,RabbitMQ是需要建立 ...

  3. Java面向对象习题

    1: 抛出异常:throw声明异常:throwsthrow用于在程序中抛出异常,throws用于在方法内抛出异常.throw抛出的异常没有被处理的话必须有throws有throws ,但是不一定必须有 ...

  4. springboot学习章节-spring常用配置

    1.Scope package com.zhen.highlights_spring4.ch2.scope; import org.springframework.context.annotation ...

  5. python+appium+yaml安卓UI自动化测试分享

    一.实现数据与代码分离,维护成本较低,先看看自动化结构,大体如下: testyaml管理用例,实现数据与代码分离,一个模块一个文件夹 public 存放公共文件,如读取配置文件.启动appium服务. ...

  6. 五、LCD屏填充纯色

    废话不说,直接上代码: lcd.c #include "lcd.h" static int PEN_COLOR = LCD_RED; /* 定义画笔(前景)颜色 */ static ...

  7. android小程序-电子钢琴-多点触控

    我在第一篇博客<android小程序-电子钢琴-滑动连续响应>中实现了一个简单地7键钢琴,这几天把它又完善了一下,增加了多点触控,按键也增加了一个低音区和一个高音区,使得又可以多弹一点简单 ...

  8. 通过 onclick = "test()"事件定义的事件 , 如何触发.

    <div onclick="test()" id="xxx">点击</div> function test() { alert('123 ...

  9. ios 汽车品牌展示案例

    汽车组模型 // ZQRGroup.h #import <Foundation/Foundation.h> @interface ZQRGroup : NSObject /** *组标题 ...

  10. 我有特殊的Windows激活姿势

    一直都在用的激活姿势,给大家分享下~ 保存为 .cmd 文件 右键->以管理员身份运行 @echo off setlocal EnableDelayedExpansion & cd /d ...