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="width:400px;"></el-input>
 　</el-form-item>

　　<el-form-item label="活動信息" prop="info.age" required>
　　　<el-input v-model="fromData.info.age" autocomplete="off" style="width: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="width: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="width: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']