vue element嵌套表單驗證

在vue2搭配elementUI中,如果是動態表單中需要表單驗證，官方文檔的解決方法

https://element.eleme.cn/#/zh-CN/component/form

<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能為空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">刪除</el-button>
  </el-form-item>

如果是多層表單相互嵌套，也是類似的思路 舉例1 https://segmentfault.com/a/1190000014366951舉例2https://www.cnblogs.com/shy1766IT/p/11186772.html

但是 如果多層便利便利嵌套的 el-form-item 不規律的便利生成（子組件並向生成多個el-form-item）,不規律的動態驗證，那么每一個el-form-item 中的" :prop="'domains.' + index + '.value'" 的prop就很容易報錯,或者找不到對應的path，很麻煩

一個比較簡便的寫法

<!--只要當前表單組件最終渲染在父組件內部-->
<el-form-item prop="testRules" :rules="testRules('自己傳參')" >
            <el-input
              v-model.trim="test"
              placeholder="請輸入"
        />
    </el-form-item>

//可以直接放在data里面
testRules: (data) => {
   return [
      {
            validator:(rule, value, callback) => {
                if(!data){
                //驗證不通過
                callback(new Error('！表單驗證'));  
                }   
                //驗證通過
                callback(); 
                
            },
            trigger: 'blur'
      }
   ];
}

這樣子寫 就可以省下來:prop="'domains.' + index + '.value'" 拼接的那一大堆

 

HTTPS     詳細 X

基本翻譯

abbr. 超文本傳輸協議安全（Hyper Text Transfer Protocol）

網絡釋義

HTTPS: 安全超文本傳輸協議(Hypertext Transfer Protocol Secure)

HTTPS tracker: 支援

HTTP & HTTPS: 治理設定