vue element 关于表单数组循环、对象数据校验

1、模拟数据：

格式：对象中嵌套数组，数组中嵌套对象

data() {
  return {
     fromData: {
       name: '',
　　　　info: {
　　　　　　age: '' 
　　　　}
       sizeData: [
　　　　　　{
　　　　　　　　goods_sn: '',
　　　　　　　　size: ｛
　　　　　　　　　　type: ''
　　　　　　　　｝
　　　　　　}
　　　　],
    }            
  }  
}

2、html中循环输出

<el-form :model="fromData" :rules="rules" ref="ruleForm" label-width="120px" class="ruleForm">
　 <!-- 常见的检验模式 -->
　 <el-form-item label="活动名称" prop="name" required>
　　　<el-input v-model="fromData.name" autocomplete="off" style="400px;"></el-input>
 　</el-form-item>

　　<el-form-item label="活动信息" prop="info.age" required>
　　　<el-input v-model="fromData.info.age" autocomplete="off" style="400px;"></el-input>
 　</el-form-item>

　　<!-- 嵌套循环检验模式 -->
　　<div v-for="(item, index) in fromData.sizeData" :key="index + '_size'" class="clearfix mt24">

　　　　<el-form-item class="fl" label="虚拟SKU" :prop="'sizeData.' + index + '.goods_sn'" :rules="sizeData.goods_sn" required>
　　　　　　<el-input v-model="item.goods_sn" autocomplete="off" placeholder="请输入SKU" style="200px;"></el-input>
　　　　</el-form-item>


        　　　　<el-form-item class="fl" label="尺寸规格" :prop="'sizeData.' + index + '.size.type'" :rules="sizeData.size_type" required>
          　　　　　　<el-input v-model="item.size.type" autocomplete="off" placeholder="请选择尺寸值，用英文逗号分隔" style="600px;"></el-input>
        　　　　</el-form-item>
      　　 </div>
　</el-form>

　(1)、常见的检验模式：即element文档给出的实例，格式通常是个单层对象　

let obj = { 
   name: 'cp_cookie',
　　inof: {
　　　　age: ''
　　}
}

// html 中的写法， 不能自定义键名，可以点字符串
// 1、简单键值对
prop="name"

// 2、简单对象
prop="inof.age" 

 　(2)、嵌套数组循环校验模式：多层嵌套结构

let obj = { 
  sizeData: [ 
     { 
        goods_sn: '' ,
        size: {
　　　　　　type: ''
　　　　 }
      }
   ] 
}

// html 中的写法，自定义的prop，注意前面的冒号：不能缺少
// 1、数组校验
:prop="'sizeData.' + index + '.goods_sn'" :rules="sizeData.goods_sn"

// 2、对象校验， 这里可以自定义键名（同上）
:prop="'sizeData.' + index + '.size.type'" :rules="sizeData.size_type"

注：这里与普通写法不同，因为要校验每条数据，因此必须一一定义，并重新定义检验rules名(如：sizeData)，如果多层可以另起一个自定义

3、校验方法

data() {
　　// 普通单层校验
　　rules: {
　　　　name: [
　　　　　　{ required: true, message: '请输入活动名称', trigger: ['change', 'blur'] }
　　　　]
　　　　"info.age": [  // 点字符串键名
　　　　　　{ required: true, message: '请输入活动信息', trigger: ['change', 'blur'] }
　　　　]
　　},

　　// 嵌套多层数据校验，如果有多层，可以单独再定义rules名，如下
　　sizeData: {
　　　　goods_sn: [
　　　　　　{ required: true, message: '请输入SKU', trigger: ['change', 'blur'] },
　　　　　　{ validator: validateSku, trigger: ['change', 'blur'] }   // validateSku自定义检验规则，这不用介绍了
　　　　],
　　　　size_type: [  // 自定义键名
　　　　　　{ required: true, message: '请选择尺寸值，用英文逗号分隔', trigger: ['change', 'blur'] }
　　　　]
　　}
}

注：这里踩了个坑，就是检验清空输入框会出现代码英文提示，这里最好就是将触发的多个事件名都写上，这样就只会出现我们自定义的提示
   trigger: ['change', 'blur']