前言

表单验证是前端开发中肯定要实现的功能，如何更加优雅的在 React 实现，如何将表单验证与多语言更融洽的结合在一起使用是本篇文章着重介绍的主题。

多语言实现

i18next 是一个由 JS 实现的多语言框架，它提供了完整的多语言解决方案，而且能够和现在流行的前端框架，比如 React，Vue 和 Angular 等，结合使用。除了自带的多语言功能外，还支持与功能插件结合实现更多复杂功能，比如检测用户使用语言，缓存翻译资源文件等。同时，扩展性很好，还支持针对复杂项目中资源文件多大的问题，使用命名空间来划分到不同文件中。

要在 React 中使用首先需要安装对应的包：

yarn add i18next react-i18next

根目录下创建如下目录及文件结构：

my-app/
└─ src/
   └─ i18n/
      └─ resources/
         └─ en.ts
         └─ zh.ts
   index.ts

index.ts中初始化 i18next 实例。

src/i18n/index.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import zh from "./resources/zh";
import en from "./resources/en";

i18n
  .use(initReactI18next) // use加载功能插件，这里是将i18n对象传递到react-i18next插件中
  .init({
    // 资源文件定义，资源文件名字需要注意满足语言简写标准
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: zh
      }
    },
    // 设置语言无效时的默认语言
    fallbackLng: "zh",
    // react已经解决了xss注入问题，这里可以设置为false
    interpolation: {
      escapeValue: false
    },
    // 设置遇到语言变化时，重新渲染UI
    react: {
      bindI18n: "languageChanged"
    }
  });

export default i18n;

如何注释中描述的问题，语言文件不能随意设置，必须满足简写标准，同时这里的 translation 是语言文件所在的命名空间，同时也自动成为默认命名空间。

语言资源文件定义

zh.ts

export default {
  label: {
    name: "姓名",
    email: "电子邮件",
    namePlaceHolder: "输入你的姓名",
    emailPlaceHolder: "输入你的电子邮箱",
    reset: "重置",
    submit: "提交"
  },
  validate: {
    required: "{{name}}字段不能为空.",
    range:
      "请在{{name}}中输入与{{max}}和{{min}}一样多的字符.",
    min: "请在{{name}}中输入与{{min}}一样多的字符.",
    email: "请输入{{name}}的有效电子邮件地址."
  }
};

en.ts

export default {
  label: {
    name: "Name",
    email: "Email",
    namePlaceHolder: "Enter your Name",
    emailPlaceHolder: "Enter your email",
    reset: "reset",
    submit: "submit"
  },
  validate: {
    required: "{{name}} field cannot be empty.",
    range:
      "Please enter as many characters as {{max}} and {{min}} in {{name}}.",
    min: "Please enter as many characters as {{min}} in {{name}}.",
    email: "Please enter a valid email address for {{name}}."
  }
};

最后我们在应用程序入口文件引入 i18next 初始化文件以便在程序启动时完成语言实例的初始化工作。

src/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";

import App from "./containers/App";
import "./styles/App.css";
import "./i18n";

ReactDOM.render(<App />, document.getElementById("app"));

表单验证实现

表单验证无论在哪里都是很烦人的玩意儿，你需要重复写类似的代码无数次，也可能会将无数的验证类型的代码和表单定义结合起来，影响到UI表单定义的整洁。我们这里采用 Formik 来完成表单验证，它相当的轻量级，打包压缩后只有 12.7 kB，可以很好的获取表单的值与状态，处理表单验证及错误信息，处理表单提交，最令人激动的是， Formik 可以将这一系列的定义集中到一个地方定义，并与UI定义分离，会使你的表单测试，重构，理解都更加容易。同时，我们将其与 Yup 结合使用，Yup 是一个JavaScript对象模式验证器和对象解析器。 这个API的思想风格与 Joi 类似，但比之更精简。除了预制的验证以外，可以很轻松的扩展自己需要的验证，也支持异步验证。

首先安装对应的包：

yarn add formik yup

yarn add -D @types/yup

接着我们新增一个名叫MyForm.tsx的组件类

src/components/MyForm.tsx

// 定义表单包含的字段名及结构
interface FormValues {
  name: string;
  email: string;
}

// 表单定义组件
const Form: React.SFC<FormikProps<FormValues>> = props => {
  // 使用react-i18next的Hook使我们的函数组件能够获取到多语言转换用的t函数
  const { t } = useTranslation();

  // Formik传入的相关属性及状态
  const {
    values,
    touched,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    handleReset,
    setFieldTouched
  } = props;
  
  // 自定义Hook完成语言切换后表单重新渲染
  useTranslateFormErrors(errors, touched, setFieldTouched);

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">
        {t("label.name")}
      </label>
      <input
        id="name"
        placeholder={t("label.namePlaceHolder")}
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
      />
      {errors.name && touched.name && (
        <div>{errors.name}</div>
      )}
      <label htmlFor="email">
        {t("label.email")}
      </label>
      <input
        id="email"
        placeholder={t("label.emailPlaceHolder")}
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.email}
      />
      {errors.email && touched.email && (
        <div>{errors.email}</div>
      )}

      <button
        type="button"
        onClick={handleReset}
      >
        {t("label.reset")}
      </button>
      <button type="submit" disabled={isSubmitting}>
        {t("label.submit")}
      </button>
    </form>
  );
};

通过 react-i18next 的 useTranslation钩子获取到多语言 t 转换函数，如需要也可以获取到 i18n 的实例。useTranslateFormErrors 钩子如下所示：

src/common/Hook/useTranslateFormErrors.ts

import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { FormikTouched, FormikErrors } from "formik";

const useTranslateFormErrors = <T>(
  errors: FormikErrors<T>,
  touched: FormikTouched<T>,
  setFieldTouched: Function
) => {
  // 钩子获取多语言i18n对象
  const { i18n } = useTranslation();
  // 重新刷新已显示错误信息的正确语言版本
  const handleTouched = () => {
    for (const field in errors) {
      if (field in touched) {
        setFieldTouched(field);
      }
    }
  };
  // 初始化时监听语言变更事件
  useEffect(() => {
    i18n.on("languageChanged", handleTouched);
    // 推出组件注销事件
    return () => {
      i18n.off("languageChanged", handleTouched);
    };
  }, [errors]);
};

export default useTranslateFormErrors;

接着，我们完成表单事件及验证规则的定义。

src/components/MyForm.tsx

...
// 表单值初始化
const initialValues: FormValues = {
  name: "",
  email: ""
};
// 定义验证规则
const rules: ValidateFieldDef<FormValues> = {
  name: [
    // 必输
    { name: VALIDATE_TYPES.STR_REQUIRED},
    // 范围验证（自定义）
    { name: VALIDATE_TYPES.STR_RANGE, params: { min: 1, max: 12 } }
  ],
  email: [
    // 必输
    { name: VALIDATE_TYPES.STR_REQUIRED },
    // 邮件格式
    { name: VALIDATE_TYPES.STR_EMAIL },
    // 范围验证（自定义）
    { name: VALIDATE_TYPES.STR_RANGE, params: { min: 1, max: 100 } }
  ]
};

// Formik组件定义
const MyForm: React.SFC = outerProps => {
  // 使用react-i18next的Hook使我们的函数组件能够获取到多语言转换用的t函数
  const { t } = useTranslation();
  // 自定义根据rules生成验证规则
  const schema = getYupSchema(initialValues, rules, t);
  // Formik相关定义
  return (
    <Formik
      // 表单值初始化
      initialValues={initialValues}
      // 表单提交定义
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 500);
      }}
      // yup验证规则定义
      validationSchema={schema}
      // 渲染表单组件，将外部属性及Formik属性同时传入表单组件
      render={props => <Form {...props} {...outerProps} />}
    />
  );
};

export default MyForm;

如上所示，我们没有为了减少yup规则中的样本代码规模，通过定义指定字段的验证规则对象来完成 Yup 的schema动态生成。

import * as Yup from "yup";

// 多语言命名空间
const ns = "translation:";
// 表单中字段显示文本
const fieldPathPrefix = `${ns}label`;
// 表单中字段对应的验证文本
const checkPathPrefix = `${ns}validate`;
// obj为表单字段
// rules为表单字段需要生成的验证规则
// t为多语言转换函数
const getYupSchema = (obj, rules, t) => {
  // yup生成的schema
  const schema = {};
  // 循环表单字段
  for (const fieldName in obj) {
    // 获取对应语言的字段文本
    const name = t(`${fieldPathPrefix}.${fieldName}`);
    // yup的schema生成过程中是采用的链式语法，例如yup.string().required().min().range()
    // 所以我们使用reduce函数来动态完成此操作
    schema[fieldName] = rules[fieldName].reduce((total, current) => {
      // 拆分常量定义规则,获取到验证类型及验证方法，如string.required
      const splits = current.name.split(".");
      // 验证类型
      const type = splits[0];
      // 验证方法
      const validateName = splits[1];
      // 首次循环需要根据类型初始化，如Yup.string()
      if (total === null) {
        total = Yup[type]();
      }
      // 获取对应语言所显示的错误文本
      const message = t(`${checkPathPrefix}.${validateName}`, {
        name: name,
        ...current.params
      });
      // 处理验证方法参数，参数必须遵照API文档顺序
      const params = [];
      if (current.params) {
        for (const key in current.params) {
          params.push(current.params[key]);
        }
      }
      // 默认message为最终参数
      params.push(message);
      // 调用参数个数不同的对应验证方法生成schema
      if (params.length === 1) {
        return total[validateName](params[0]);
      } else if (params.length === 2) {
        return total[validateName](params[0], params[1]);
      } else if (params.length === 3) {
        return total[validateName](params[0], params[1], params[2]);
      } else {
        return total[validateName]();
      }
    }, null);
  }
  // 返回yup对象
  return Yup.object().shape(schema);
};

export default getYupSchema;

类型定义文件

src/common/validateTypes.ts

// 验证类型及方法枚举，定义需要使用的类型及方法，包括自定义和内置
export enum VALIDATE_TYPES {
  STR_REQUIRED = "string.required",
  STR_RANGE = "string.range",
  STR_EMAIL = "string.email",
  STR_MIN = "string.min"
}

// 泛型定义验证字段，只能定义对象包含字段
export type ValidateFieldDef<T> = {
  [field in keyof T]: ValidateRuleDef[]
};

// 验证规则对象，name 标识了验证类型及方法，必须符合枚举VALIDATE_TYPES定义
// params是可选参数，指定验证方法的参数
export interface ValidateRuleDef {
  name: VALIDATE_TYPES;
  params?: {};
}

类型定义文件，默认了许多规约，枚举里面定义的验证规则必须与多语言定义文档相匹配，才能完成动态生成。

追加 range 自定义验证函数

import { addMethod, string } from "yup";

addMethod(string, "range", function(min, max, message) {
  return this.test("range", message, function(value) {
    const { path, createError } = this;
    const len = value ? value.length : 0;
    return (len >= min && len <= max) || createError({ path, message });
  });
});

此追加方法也需要添加到入口文件中，完整的入口文件如下所示：

import * as React from "react";
import * as ReactDOM from "react-dom";

import App from "./containers/App";
import "./styles/App.css";
import "./i18n";
import "./common/addValidateMethods";

ReactDOM.render(<App />, document.getElementById("app"));

最后在 Header.tsx 中增加语言切换功能：

{["cn", "en"].map((lng, idx) => {
            return (
              <Link
                key={idx}
                href={"#"}
                color="inherit"
                className={classes.link}
                onClick={() => i18n.changeLanguage(lng)}
              >
                {lng}
              </Link>
            );
          })}

最后我们将此表单验证组件，附加到 Top.tsx上，即可运行。效果如下所示：