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


Posted in Javascript onJune 28, 2018

标题描述看起来有些复杂,有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循环里的表单项验证的解决方案了,希望能帮助到遇到此问题的同学。

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

Javascript 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
详解ES6中的三种异步解决方案
Jun 28 #Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 #Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 #Javascript
vue如何引入sass全局变量
Jun 28 #Javascript
小程序实现带年月选取效果的日历
Jun 27 #Javascript
浅谈Angular6的服务和依赖注入
Jun 27 #Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 #Javascript
You might like
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php微信支付之APP支付方法
2015/03/04 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JS中递归函数
2016/06/17 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
父母对孩子的寄语
2014/04/09 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
小学四年级学生评语
2014/12/26 职场文书
神秘岛读书笔记
2015/07/01 职场文书
计算机教师工作总结
2015/08/13 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python