Element UI 表单校验源码解析：深度解读收集和校验机制

前言

Element UI 是一个基于 Vue.js 的前端框架，提供了一系列高质量的组件。Form 表单是 Element UI 中一个非常重要的组件，它提供了便捷的方式来创建和校验表单。本文将通过源码分析的方式，深入探究 Element UI 表单校验的实现机制，帮助你全面掌握表单验证的原理和使用方法。

表单校验的两个 API

Element UI 的 Form 表单校验提供了两个主要 API：

• validateField(fieldName): 校验指定字段。
• validate(callback): 校验整个表单。

这两个 API 的使用方式和返回结果略有不同，但总体上遵循相同的校验流程。

收集子组件的值

在校验表单之前，需要先收集表单中所有子组件的值。Element UI 的 Form 表单通过遍历其内部的子组件来实现这一功能。

// Form.vue 源码片段
created() {
  this.children = []; // 存储子组件的数组
  this.formModel = {}; // 存储表单值的模型
  ...
},
mounted() {
  this.addChildren(); // 在组件挂载后添加子组件
  ...
},
methods: {
  addChildren() {
    const children = this.$children;
    for (let i = 0; i < children.length; i++) {
      const child = children[i];
      // 根据子组件类型执行不同的处理逻辑
      if (child.isField) {
        // 字段组件
        ...
      } else if (child.isNested) {
        // 复合组件
        ...
      }
      this.children.push(child);
    }
  },
  ...
}

通过遍历子组件，Form 表单可以获取到每个字段组件的值，并将其存储在 formModel 模型中。

校验流程

收集到表单值后，就可以进行校验了。Element UI 的表单校验流程主要分为以下几个步骤：

1. 遍历子组件，收集校验规则： 每个字段组件都会定义自己的校验规则，Form 表单会遍历子组件，收集所有校验规则。
2. 对表单值进行校验： Form 表单会根据收集到的校验规则，对表单值进行校验。如果某个字段的值不符合校验规则，则会触发校验失败。
3. 收集校验结果： Form 表单会将校验结果收集到一个数组中，并提供给用户。

校验 API 的实现

validateField(fieldName)

validateField API 用于校验指定的字段。它的实现流程如下：

1. 获取指定字段的校验规则。
2. 对字段的值进行校验。
3. 返回校验结果，包括是否校验通过和错误消息。

validate(callback)

validate API 用于校验整个表单。它的实现流程如下：

1. 收集所有字段的校验规则。
2. 对表单值进行校验。
3. 调用回调函数，将校验结果传递给用户。

总结

通过本文的源码分析，我们深入了解了 Element UI 表单校验的实现机制。理解了收集子组件的值和校验流程，可以帮助我们更有效地使用 Element UI 表单组件，从而创建健壮可靠的表单验证功能。