使用Yup简化React表单验证
构建Web应用时，表单验证是确保数据完整性的关键步骤。如果您正在寻找一种简单而有效的方法来验证React表单，那么Yup是您的理想选择！本教程将指导您如何设置Yup，并创建一个经过良好验证的表单。
您将学到什么
阅读本教程后，您将掌握以下技能：
在React项目中配置Yup进行表单验证。 创建包含验证规则的表单。 使用外部CSS样式表美化表单。先决条件
开始之前，请确保您具备以下条件：
React基础知识。 Node.js已安装在您的计算机上。步骤1：安装Yup
首先，在您的React项目中安装Yup。在终端中运行以下命令：
1
npm install yup
步骤2：创建表单
以下是一个简单的表单，包含姓名和邮箱字段。我们将使用React的useState来管理输入值和错误信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React, { useState } from react;
function MyForm() {
const [formData, setFormData] = useState({ name: , email: });
const [errors, setErrors] = useState({});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
// 验证逻辑将在此处添加
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>姓名:</label>
<input name="name" onChange={handleChange} type="text" value={formData.name} />
</div>
<div>
<label>邮箱:</label>
<input name="email" onChange={handleChange} type="email" value={formData.email} />
</div>
<button type="submit">提交</button>
</form>
);
}
export default MyForm;
步骤3：添加Yup验证
现在，我们将集成Yup。我们将创建一个验证模式，并在提交表单后使用它来检查数据。
1
2
3
4
5
6
import * as Yup from "yup";
const validationSchema = Yup.object({
name: Yup.string().required(姓名必填!),
email: Yup.string().email(无效的邮箱地址).required(邮箱必填!),
});
我们将使用此模式在handleSubmit函数中验证表单：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const handleSubmit = async (e) => {
e.preventDefault();
try {
await validationSchema.validate(formData, { abortEarly: false });
setErrors({});
alert(表单有效!);
} catch (err) {
const newErrors = {};
err.inner.forEach((error) => {
newErrors[error.path] = error.message;
});
setErrors(newErrors);
}
};
步骤4：样式设置
为了让表单更美观，创建一个外部CSS文件 (例如MyForm.css) 并添加以下样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
font-weight: bold;
display: block; /* 使标签占据一行 */
margin-bottom: 5px;
}
.input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* 包含内边距和边框 */
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
.button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
将CSS文件导入到您的组件中：
1
import ./MyForm.css;
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { useState } from react;
import * as Yup from yup;
import ./MyForm.css;
function MyForm() {
// ... (useState, handleChange, handleSubmit 与之前相同)
return (
<div className="form-container">
<h1>简单表单</h1>
<form onSubmit={handleSubmit}>
<div>
<label className="label">姓名:</label>
<input className="input" name="name" onChange={handleChange} type="text" value={formData.name} />
{errors.name && <div className="error">{errors.name}</div>}
</div>
<div>
<label className="label">邮箱:</label>
<input className="input" name="email" onChange={handleChange} type="email" value={formData.email} />
{errors.email && <div className="error">{errors.email}</div>}
</div>
<button className="button" type="submit">提交</button>
</form>
</div>
);
}
export default MyForm;
结论
Yup是一个功能强大的表单验证工具，即使不使用Formik也能轻松实现。只需几行代码，即可为您的React应用程序添加强大的验证功能。 本示例展示了基本的验证，您可以根据需求添加更多复杂的验证规则。
以上就是使用 YUP 进行表单验证的详细内容，更多请关注php中文网其它相关文章！