欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 20:32:24
标题描述看起来有些复杂,有vue,element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了。 首先ele...

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

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