剖析async-validator validator源码，探究表单校验精髓

前端

2024-01-01 14:51:16

async-validator源代码分析

上篇文章中，我们分析了async-validator校验库的rule目录下的代码，今天将继续分析validator目录下的源码，从底层开始理解表单校验的原理。

以下为validator目录下的文件结构：

index.js：validator目录下的入口文件，主要负责初始化validator对象，并提供对外接口。
messages.js：定义了校验规则对应的错误提示信息。
schema.js：定义了校验规则的模式。
validator.js：实现了校验规则的具体逻辑。

validator.js文件解析

validator.js文件是validator目录下的核心文件，负责实现校验规则的具体逻辑。文件内容较长，这里只分析几个重要的部分。

校验规则的定义

校验规则的定义位于validator.js文件的开头部分，如下：

const validators = {
  required: function (value, rule, source, errors, options) {
    if (rule.required && (!value || value.trim() === '')) {
      errors.push(new ValidationError(format('validate.{rule} is required', rule), rule.name, value));
    }
  },
  // ...
};

在这个对象中，每个校验规则对应一个函数，函数接受多个参数：

value：要校验的值。
rule：校验规则。
source：校验源，即被校验的对象。
errors：错误数组，用于存放校验错误。
options：校验选项。

校验规则的执行

校验规则的执行位于validator.js文件的中间部分，如下：

function validate(value, rule, source, errors, options) {
  const validator = validators[rule.name];
  if (validator) {
    validator(value, rule, source, errors, options);
  }
}

这个函数接受多个参数：

value：要校验的值。
rule：校验规则。
source：校验源，即被校验的对象。
errors：错误数组，用于存放校验错误。
options：校验选项。

函数首先根据校验规则的名称从validators对象中获取对应的校验函数，然后调用该校验函数进行校验。

校验结果的处理

校验结果的处理位于validator.js文件的结尾部分，如下：

function formatErrors(errors) {
  const fieldErrors = {};
  const fieldNames = [];

  errors.forEach(({ field, name, message }) => {
    fieldErrors[field] = fieldErrors[field] || [];
    fieldErrors[field].push(message);
    fieldNames.indexOf(field) === -1 && fieldNames.push(field);
  });

  return { fieldErrors, fieldNames };
}