Vue + Element 实现复杂表单嵌套校验，一键搞定！

2023-11-15 19:04:45

如何使用 Vue + Element 实现复杂表单嵌套校验：深入指南

动态嵌套校验的挑战

在现实世界的应用开发中，我们经常需要创建复杂且严格的表单，其中涉及到嵌套表单、动态添加表单和自定义验证规则等需求。这些需求给表单验证功能带来了额外的挑战，仅仅依靠基本的验证规则已经不足以满足这些要求。

Vue + Element 实现复杂表单嵌套校验

构建嵌套表单

第一步是构建嵌套表单。以下是一个示例：

<form>
  <div v-for="(item, index) in formList">
    <el-form-item label="姓名">
      <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="item.age"></el-input>
    </el-form-item>
  </div>
  <el-button type="primary" @click="submitForm">提交</el-button>
</form>

定义 prop 属性

接下来，我们需要定义 prop 属性，并将子表单的 prop 属性绑定到父表单的数据属性。

props: {
  formList: {
    type: Array,
    default: () => []
  }
}

定义自定义验证方法

然后，我们在父表单中定义自定义验证方法。

methods: {
  validateName(rule, value, callback) {
    if (value === '') {
      callback(new Error('姓名不能为空'));
    } else {
      callback();
    }
  },
  validateAge(rule, value, callback) {
    if (value === '') {
      callback(new Error('年龄不能为空'));
    } else if (value < 0 || value > 150) {
      callback(new Error('年龄必须在 0 到 150 之间'));
    } else {
      callback();
    }
  }
}

将 v-for 索引传入验证方法

最后，我们需要将 v-for 索引传入验证方法，以区分不同的表单项。

<el-form-item label="姓名">
  <el-input v-model="item.name" :rules="[{ validator: validateName, trigger: 'blur' }]"></el-input>
</el-form-item>
<el-form-item label="年龄">
  <el-input v-model="item.age" :rules="[{ validator: validateAge, trigger: 'blur' }]"></el-input>
</el-form-item>

总结

通过遵循这些步骤，我们可以在 Vue + Element 中实现复杂表单嵌套校验，包括动态添加表单、嵌套表单自定义验证规则等需求。

常见问题解答