Vue 表单验证-嵌套验证

el-form 表单验证时 使用的是  async-validator 规则可以写在 data 中,如果 form 表单中出现数组,且数组中字段需要验证时可以单独写验证规则

data 中的数据结构


 {
    // 需要提交到服务器的结构
    formData:{
      cname:'',
      // 嵌套数组,可动态增加
      list: [
        {sname:'',age:''},
        {sname:'',age:''}
      ]
    }
    // 主体规则
    rules:{
      cname: [
        { required: true, message: '请输入班级名称', trigger: 'blur'  }
      ],
    }
}

通过索引直接绑定 el-form-item 的prop 属性

<templaye>

<form ref="form" v-model="formData" :rules="rules">
  <el-form-item label="班级名称" prop="cname">
    <el-input v-model="formData.cname" autocomplete="off"></el-input>
  </el-form-item>
  <el-table>
    <el-table-column>
      <template slot-scope="{row,$index}">
        <el-form-item :prop="`list.${$index}.sname`"  :rules="{required: true, message: '请输入学生名称', trigger: 'blur'}">
        <el-input v-model="row.sname"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
     <el-table-column>
      <template slot-scope="{row,$index}">
        <el-form-item :prop="`list.${$index}.age`"  :rules="{required: true, message: '请输入学生年龄', trigger: 'blur'}">
        <el-input v-model="row.age"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</form>
</templaye>

提交前验证

methods:{
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('验证成功!');
      } else {
        return false;
      }
    });
  }
}
上一篇
下一篇