在前端开发中，表单处理是常见的任务之一。表单处理通常包括输入验证、数据格式化、表单提交等操作。而在 TypeScript 中，表单处理可以更加简单、安全和可维护。
输入验证
在表单处理中，输入验证是一个非常重要的环节。输入验证可以帮助我们防止用户输入错误的数据，从而提高应用程序的安全性和稳定性。
在 TypeScript 中，我们可以使用类型检查来进行输入验证。例如，我们可以定义一个接口来描述表单数据的类型：
interface FormValues {
username: string;
password: string;
email: string;
}然后，我们可以使用 TypeScript 的类型注解来声明表单数据的类型：
const formValues: FormValues = {
username: 'john',
password: 'secret',
email: 'john@example.com',
};在这个例子中，我们定义了一个 FormValues 接口，它包含了三个字符串类型的属性：username、password 和 email。然后，我们使用类型注解来声明 formValues 的类型，这样 TypeScript 就可以在编译时检查表单数据的类型是否正确。
除了使用类型检查来进行输入验证，我们还可以使用第三方库来进行表单验证。例如，validator.js 是一个常用的 JavaScript 验证库，它可以帮助我们验证表单数据的格式、长度、范围等。
// www.javascriptcn.com code example
import validator from 'validator';
interface FormValues {
username: string;
password: string;
email: string;
}
function validateFormValues(values: FormValues): boolean {
const { username, password, email } = values;
if (!username || !password || !email) {
return false;
}
if (!validator.isEmail(email)) {
return false;
}
return true;
}在这个例子中，我们使用了 validator.js 来验证表单数据的格式。我们定义了一个 validateFormValues 函数，它接收一个 FormValues 类型的参数，并返回一个布尔值表示验证结果。在函数内部，我们使用 validator.isEmail 方法来验证邮箱地址的格式是否正确。
数据格式化
在表单处理中，数据格式化是另一个重要的环节。数据格式化可以帮助我们将用户输入的数据转换成我们需要的格式，从而方便后续的处理和存储。
在 TypeScript 中，我们可以使用类型转换来进行数据格式化。例如，我们可以定义一个接口来描述表单数据的类型：
interface FormValues {
username: string;
password: string;
email: string;
age: number;
}然后，我们可以使用 TypeScript 的类型转换来将表单数据转换成我们需要的格式：
// www.javascriptcn.com code example
const formValues: FormValues = {
username: 'john',
password: 'secret',
email: 'john@example.com',
age: '30', // 注意：这里的 age 是字符串类型
};
const formattedFormValues: FormValues = {
...formValues,
age: parseInt(formValues.age, 10), // 将 age 转换成数字类型
};在这个例子中，我们定义了一个 FormValues 接口，它包含了四个属性：username、password、email 和 age。然后，我们定义了一个 formValues 对象，它包含了表单数据。注意，age 属性是一个字符串类型。
接下来，我们使用 parseInt 方法将 age 属性转换成数字类型，并将转换后的数据保存到 formattedFormValues 中。
除了使用类型转换来进行数据格式化，我们还可以使用第三方库来进行格式化。例如，moment.js 是一个常用的 JavaScript 日期处理库，它可以帮助我们将日期数据转换成不同的格式。
// www.javascriptcn.com code example
import moment from 'moment';
interface FormValues {
username: string;
password: string;
email: string;
birthday: string;
}
function formatFormValues(values: FormValues): FormValues {
const { username, password, email, birthday } = values;
return {
username,
password,
email,
birthday: moment(birthday).format('YYYY-MM-DD'),
};
}在这个例子中，我们使用了 moment.js 来格式化生日日期。我们定义了一个 formatFormValues 函数，它接收一个 FormValues 类型的参数，并返回一个 FormValues 类型的对象表示格式化后的表单数据。在函数内部，我们使用 moment 方法将生日日期转换成 YYYY-MM-DD 格式。
表单提交
在表单处理中，表单提交是最重要的环节。表单提交可以帮助我们将用户输入的数据发送到服务器端，从而实现数据的持久化和处理。
在 TypeScript 中，我们可以使用 fetch API 来进行表单提交。例如，我们可以定义一个接口来描述表单数据的类型：
// www.javascriptcn.com code example
interface FormValues {
username: string;
password: string;
email: string;
}
async function submitFormValues(values: FormValues): Promise<void> {
const response = await fetch('/api/form', {
method: 'POST',
body: JSON.stringify(values),
});
if (!response.ok) {
throw new Error('Failed to submit form values');
}
}在这个例子中，我们定义了一个 FormValues 接口，它包含了三个字符串类型的属性：username、password 和 email。然后，我们定义了一个 submitFormValues 函数，它接收一个 FormValues 类型的参数，并返回一个 Promise<void> 表示表单提交结果。在函数内部，我们使用 fetch 方法向服务器端发送 POST 请求，并将表单数据转换成 JSON 格式作为请求的 body。
如果请求失败，我们将抛出一个错误表示表单提交失败。
除了使用 fetch API 来进行表单提交，我们还可以使用第三方库来进行表单提交。例如，axios 是一个常用的 JavaScript HTTP 请求库，它可以帮助我们发送 AJAX 请求并处理响应。
// www.javascriptcn.com code example
import axios from 'axios';
interface FormValues {
username: string;
password: string;
email: string;
}
async function submitFormValues(values: FormValues): Promise<void> {
const response = await axios.post('/api/form', values);
if (response.status !== 200) {
throw new Error('Failed to submit form values');
}
}在这个例子中，我们使用了 axios 来发送表单数据。我们定义了一个 submitFormValues 函数，它接收一个 FormValues 类型的参数，并返回一个 Promise<void> 表示表单提交结果。在函数内部，我们使用 axios.post 方法向服务器端发送 POST 请求，并将表单数据作为请求的参数。
如果请求失败，我们将抛出一个错误表示表单提交失败。
示例代码
下面是一个完整的 TypeScript 表单处理示例代码：
// www.javascriptcn.com code example
import validator from 'validator';
import moment from 'moment';
import axios from 'axios';
interface FormValues {
username: string;
password: string;
email: string;
birthday: string;
}
function validateFormValues(values: FormValues): boolean {
const { username, password, email } = values;
if (!username || !password || !email) {
return false;
}
if (!validator.isEmail(email)) {
return false;
}
return true;
}
function formatFormValues(values: FormValues): FormValues {
const { username, password, email, birthday } = values;
return {
username,
password,
email,
birthday: moment(birthday).format('YYYY-MM-DD'),
};
}
async function submitFormValues(values: FormValues): Promise<void> {
const response = await axios.post('/api/form', values);
if (response.status !== 200) {
throw new Error('Failed to submit form values');
}
}
async function handleSubmit(event: Event): Promise<void> {
event.preventDefault();
const form = event.target as HTMLFormElement;
const formData = new FormData(form);
const formValues: FormValues = {
username: formData.get('username') as string,
password: formData.get('password') as string,
email: formData.get('email') as string,
birthday: formData.get('birthday') as string,
};
if (!validateFormValues(formValues)) {
alert('Invalid form values');
return;
}
const formattedFormValues = formatFormValues(formValues);
try {
await submitFormValues(formattedFormValues);
alert('Form submitted successfully');
} catch (error) {
alert(`Failed to submit form: ${error.message}`);
}
}
const form = document.querySelector('form') as HTMLFormElement;
form.addEventListener('submit', handleSubmit);在这个例子中，我们定义了一个 FormValues 接口，它包含了四个属性：username、password、email 和 birthday。然后，我们定义了三个函数：validateFormValues、formatFormValues 和 submitFormValues，分别用于验证表单数据、格式化表单数据和提交表单数据。
最后，我们使用 addEventListener 方法将 handleSubmit 函数绑定到表单的 submit 事件上，从而实现表单提交。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da19c0a941bf71341d2107