vue element嵌套表单验证

Posted 2021-09-14 天渺工作室

在vue2搭配elementUI中,如果是动态表单中需要表单验证，官方文档的解决方法

https://element.eleme.cn/#/zh...

<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/11...
举例2 https://www.cnblogs.com/shy17...

但是 如果多层便利便利嵌套的 el-form-item 不规律的便利生成（子组件并向生成多个el-form-item）,不规律的动态验证，那么每一个el-form-item 中的" :prop="\'domains.\' + index + \'.value\'" 的prop就很容易报错,或者找不到对应的path，很麻烦

一个比较简便的写法
html

<!--只要当前表单组件最终渲染在父组件内部-->

<el-form-item prop="testRules" :rules="testRules(\'自己传参\')" >
            <el-input
              v-model.trim="test"
              placeholder="请输入"
        />
    </el-form-item>

js

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

这样子写 就可以省下来:prop="\'domains.\' + index + \'.value\'" 拼接的那一大堆