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 相关文章推荐
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
js判断节假日实例代码
Dec 27 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 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安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python中的协程深入理解
2019/06/10 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
理货员的岗位职责
2013/11/23 职场文书
2014年情人节活动方案
2014/02/16 职场文书
合作协议书范本
2014/10/25 职场文书
教育见习报告范文
2014/11/03 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫