在前端开发中，表单校验是一个必不可少的环节。但是如何实现高效、稳定的表单校验却不是一件容易的事情。本文将介绍一种基于 TypeScript 的表单校验解决方案，旨在帮助开发者提高表单校验效率和质量。
一、前置知识
在了解解决方案之前，先介绍一些基本的 TypeScript 知识：
1.1 类型
TypeScript 是一种强类型语言，其核心概念就是类型。在代码中，可以明确指定变量、函数、参数、返回值的类型，以帮助编译器检查代码的正确性。类型可以是基本类型（如字符串、数字、布尔值等），也可以是自定义类型（如对象、数组、枚举等）。同时，TypeScript 还支持泛型，以适应不同类型的处理需求。
1.2 接口
接口是一种用来描述对象的形状的方式。可以将接口看作一组属性和方法的集合，用来规范对象的结构。在 TypeScript 中，使用接口可以实现面向接口编程，提高代码的灵活性和可维护性。
1.3 类
类是一种面向对象的编程方式，用来封装数据和行为。在 TypeScript 中，类可以继承、实现接口，进行成员访问控制等操作，以提供更强大的封装特性。
二、表单校验需求
本文以一个用户注册表单为例，介绍该解决方案的实现。
在用户注册表单中，通常需要校验以下几个输入框的合法性：
- 用户名：要求长度在 4 到 20 个字符之间，只能包含数字、字母和下划线。
- 密码：要求长度在 6 到 16 个字符之间，只能包含数字、字母和符号。
- 邮箱：要求为合法的电子邮箱地址。
- 手机号码：要求符合手机号码格式（11 位数字）。
三、解决方案
基于 TypeScript 的表单校验解决方案，包含以下几个组成部分：
3.1 Validator 类
Validator 类是整个解决方案的核心，负责定义各种校验规则、执行校验操作，并返回校验结果。Validator 类的基本结构如下：
-- -------------------- ---- -------
----- --------- -
------ ----- - -
-- ------
-
------ -------- - ------- ---- ------ --------- -- -
-- ------
-
-其中，rules 属性用于定义各种校验规则，validate 方法用于执行校验操作。
3.2 Rule 接口
Rule 接口用于描述单个校验规则。一个校验规则包含两部分数据：校验类型和校验条件。
interface Rule {
type: string;
condition: any;
}其中，type 用于表示校验类型，condition 用于表示校验条件。校验条件可以是一个正则表达式、一个函数、一个字符串等数据类型。
3.3 表单数据结构
使用表单校验解决方案，需要先定义表单数据的结构。在本例中，表单数据的结构如下：
interface Form {
username: string;
password: string;
email: string;
phone: string;
}3.4 定义校验规则
根据表单校验需求，可以定义如下校验规则：
-- -------------------- ---- -------
--------------- - -
--------- -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --- --- --
- ----- --------- ---------- ----------------- -
--
--------- -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --- --- --
- ----- --------- ---------- ------------------------------ -
--
------ -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --------------------------------------------------- -
--
------ -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- ---------- -
--
--其中，required 表示是否为必填项；length 表示长度限制；format 表示格式限制。
3.5 执行校验操作
在表单提交时，定义一个 validate 函数，用于执行校验操作。该函数接受表单数据和校验规则作为参数，同时返回校验结果。
-- -------------------- ---- -------
----- -------- - ------ ----- ------ - ----- -------- ------ -- -- -
----- ------- - ----- -------- -------- - - ---
------------------------------- -- -
----- ----- - ----------
----- ---------- - -----------
------------------------- -- -
----- - ----- --------- - - -----
-- ----- --- ---------- -- ------- -
-- -------------- ----------- - ---
------------------------ -- -----------
-
-- ----- --- --------- -
----- ----- ---- - --------- -- ---
-- ---- -- --- -- ------------- - --- -- ------------ - ----- -
-- -------------- ----------- - ---
------------------------ -- ------ ------ -- ------ -- ---------
-
-
-- ----- --- -------- -- --------- -- ----------------------- -
-- -------------- ----------- - ---
------------------------- ------ -- ---------
-
---
---
------ -------
--该函数会逐一校验表单数据中每个输入框的合法性，如果存在校验错误，则将错误信息保存到 errors 对象中，并返回该对象。
3.6 示例代码
最终代码如下：
-- -------------------- ---- -------
--------- ---- -
----- -------
---------- ----
-
--------- ---- -
--------- -------
--------- -------
------ -------
------ -------
-
----- --------- -
------ ----- - -
--------- -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --- --- --
- ----- --------- ---------- ----------------- -
--
--------- -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --- --- --
- ----- --------- ---------- ------------------------------ -
--
------ -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- --------------------------------------------------- -
--
------ -
- ----- ----------- ---------- ---- --
- ----- --------- ---------- ---------- -
--
--
------ -------- - ------ ----- ------ - ----- -------- ------ -- -- -
----- ------- - ----- -------- -------- - - ---
------------------------------- -- -
----- ----- - ----------
----- ---------- - -----------
------------------------- -- -
----- - ----- --------- - - -----
-- ----- --- ---------- -- ------- -
-- -------------- ----------- - ---
------------------------ -- -----------
-
-- ----- --- --------- -
----- ----- ---- - --------- -- ---
-- ---- -- --- -- ------------- - --- -- ------------ - ----- -
-- -------------- ----------- - ---
------------------------ -- ------ ------ -- ------ -- ---------
-
-
-- ----- --- -------- -- --------- -- ----------------------- -
-- -------------- ----------- - ---
------------------------- ------ -- ---------
-
---
---
------ -------
--
-
----- ----- ---- - -
--------- ------------
--------- ----------
------ --------------
------ --------------
--
----- ------ - ------------------------ -----------------
--------------------该代码将输出：
{}表示表单数据校验通过，所有输入框均合法。
四、总结
本文介绍了一种基于 TypeScript 的表单校验解决方案，包括 Validator 类、Rule 接口、表单数据结构、校验规则定义和校验操作等部分。该解决方案具有可维护性和可扩展性，可以适用于各种不同的表单校验场景。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4af6683d39b4881823d1b