在前端开发中，表单验证是非常基础且必需的。而 TypeScript 的类型系统，为表单验证提供了更好的支持，可以减少很多运行时的错误。本文将介绍 TypeScript 中表单验证的实现方法，并探讨一些常见的错误。
基本类型校验
在前端开发中，最常见的表单验证就是检查输入的值是否符合预期的类型。在 TypeScript 中，可以使用基本类型来定义表单的数据类型，并使用泛型函数来实现输入值的校验。
以输入手机号码为例，定义一个手机号码的类型：
type PhoneNumber = string;
接下来，我们可以定义一个通用的校验函数，该函数接收一个输入值和一个类型参数，并返回一个布尔值表示输入是否符合类型要求：
function isType<Type>(value: any): value is Type {
// ...
}该函数使用了 TypeScript 中的类型守卫技术，判断输入值是否符合类型要求。接下来，我们可以定义一个校验手机号码的函数：
function validatePhoneNumber(value: any): value is PhoneNumber {
return isType<PhoneNumber>(value) && /^1[3-9]\d{9}$/.test(value);
}此函数仅当输入值是字符串类型且符合手机号码格式时返回 true。
复杂校验逻辑
在很多情况下，仅检查输入值的类型是不够的。我们需要更加复杂的校验逻辑，比如检查邮箱地址是否合法或密码是否满足复杂度要求等。在 TypeScript 中，可以使用自定义类型守卫函数来实现这样的复杂校验逻辑。
以密码校验为例，我们可以定义一个 Password 类型，并在密码输入框中使用该类型：
type Password = string;
<input type="password" value={password} onChange={handleChange} />
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const value = event.currentTarget.value;
if (validatePassword(value)) setPassword(value);
}接下来，我们定义一个 validatePassword 函数，它接收一个输入值，并返回一个布尔值，表示输入是否满足密码复杂度要求：
function validatePassword(value: string): value is Password {
if (value.length < 8 || value.length > 20) return false;
if (!/[A-Z]/.test(value)) return false;
if (!/[a-z]/.test(value)) return false;
if (!/\d/.test(value)) return false;
if (!/[\W_]/.test(value)) return false;
return true;
}该函数使用了正则表达式来检查输入值的复杂度，同时判断输入值的长度是否在 8 到 20 之间。在 handleChange 函数中，仅当 validatePassword 函数返回 true 时才更新密码值。
常见错误
在实现表单验证过程中，常见的错误有：
忘记返回类型
在定义自定义类型守卫函数时，要注意指定函数的返回类型。如果忘记指定返回类型，TypeScript 默认会将函数返回类型推断为 any 类型，这样可能会导致校验失败。
类型转换错误
在使用自定义类型守卫函数时，要格外注意类型转换。比如 validatePassword 函数中，返回的是 value is Password 类型，如果忘记使用该类型来判断输入值，可能会导致类型转换错误。
错误提示不明确
当表单验证失败时，错误提示对用户非常重要。错误提示应该清晰明了地说明校验失败的原因，帮助用户快速找到并修改错误的输入。
结论
表单验证是前端开发中非常基础和必需的一项技能。而 TypeScript 的类型系统，可以大大简化表单验证的实现和认证过程，减少运行时错误。在实现表单验证前，需要仔细考虑校验逻辑，并注意处理一些常见的错误。只有良好的表单验证方案，才能为用户提供更加友好和安全的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f64d78c5c563ced581ffd8