React.js中使用Joi实现字段逐个验证与整体验证的方案

1. Joi原生支持的单字段验证方法 #

Joi本身可以直接实现单字段验证，核心思路是从完整Schema中提取目标字段的规则单独校验，有两种常用方式：

方法一：用extract()提取字段Schema #

Joi提供extract(path)方法，可直接从完整Schema中定位并提取指定字段的验证规则，再用这个独立Schema验证单个字段值，适合onBlur场景：

const Joi = require('joi');

// 定义完整表单Schema
const userSchema = Joi.object({
  username: Joi.string().alphanum().min(3).max(30).required(),
  email: Joi.string().email().required(),
  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')).required()
});

// 提取username字段的验证规则
const usernameSchema = userSchema.extract('username');

// 单字段验证函数
const validateUsername = (value) => {
  const { error } = usernameSchema.validate(value);
  return error ? error.details[0].message : null;
};

// 调用示例
console.log(validateUsername('jo')); // 输出"username must be at least 3 characters long"

方法二：抽离字段规则复用 #

如果Schema结构简单，可直接把单个字段的验证规则抽离出来，同时用于单字段校验和全量Schema组合：

// 抽离单个字段规则
const usernameRule = Joi.string().alphanum().min(3).max(30).required();
const emailRule = Joi.string().email().required();

// 组合成全量Schema
const userSchema = Joi.object({
  username: usernameRule,
  email: emailRule,
  password: Joi.string().pattern(new RegExp('^[a-zA-Z0-9]{3,30}$')).required()
});

// 单字段验证直接用抽离的规则
const validateEmail = (value) => {
  const { error } = emailRule.validate(value);
  return error ? error.details[0].message : null;
};

全量验证保持原有逻辑 #

表单提交时的全量验证，直接使用完整Schema的validate()方法即可：

const formData = {
  username: 'joe123',
  email: 'joe@example.com',
  password: 'pass123'
};

const { error: fullError } = userSchema.validate(formData);
if (fullError) {
  console.log(fullError.details.map(d => d.message));
}

2. 替代工具包推荐 #

如果需要更贴合表单场景的验证体验，可考虑以下工具：

Zod #

TypeScript优先的验证库，语法简洁，和TS类型系统深度集成，单字段与全量验证逻辑统一：

import { z } from 'zod';

// 定义Schema
const UserSchema = z.object({
  username: z.string().min(3).max(30).regex(/^[a-zA-Z0-9]+$/),
  email: z.string().email(),
  password: z.string().min(3).max(30)
});

// 单字段验证
const validateUsername = (value: string) => {
  try {
    UserSchema.shape.username.parse(value);
    return null;
  } catch (err) {
    return (err as z.ZodError).issues[0].message;
  }
};

// 全量验证
const validateFullForm = (data: unknown) => {
  try {
    UserSchema.parse(data);
    return null;
  } catch (err) {
    return (err as z.ZodError).issues.map(issue => issue.message);
  }
};

Yup #

表单友好的验证库，API设计贴近表单场景，支持异步验证，可一次性返回所有字段错误：

import * as yup from 'yup';

const userSchema = yup.object({
  username: yup.string().min(3).max(30).matches(/^[a-zA-Z0-9]+$/).required(),
  email: yup.string().email().required(),
  password: yup.string().min(3).max(30).required()
});

// 单字段验证（支持异步）
const validateEmail = async (value) => {
  try {
    await userSchema.fields.email.validate(value);
    return null;
  } catch (err) {
    return err.message;
  }
};

// 全量验证（返回所有错误）
const validateFullForm = async (data) => {
  try {
    await userSchema.validate(data, { abortEarly: false });
    return null;
  } catch (err) {
    return err.errors;
  }
};

内容的提问来源于stack exchange，提问作者Pouya Jabbarisani