在使用Yup进行前端表单验证的过程中，开发者经常会遇到提示某个字段必须是对象的错误，同时还需要将服务器端返回的错误信息整合到前端的验证体系中，让验证反馈更全面。下面我们就分别解析这两类问题的解决方案。
Yup验证中必须是对象错误的常见原因
1. 验证规则定义错误
当为某个字段定义验证规则时，如果错误使用了对象类型的验证方法，而实际传入的是非对象类型的值，就会触发该错误。比如对普通输入框的值使用object()验证，而输入框返回的是字符串，就会出现问题。
以下是一个错误的验证规则示例：
import * as Yup from 'yup';
// 错误示例：对用户名使用对象验证
const wrongSchema = Yup.object({
username: Yup.object().required('用户名不能为空')
});
如果传入的username是字符串类型，验证时就会提示必须是对象的错误。正确的做法是根据字段实际类型选择验证方法：
import * as Yup from 'yup';
// 正确示例：用户名使用字符串验证
const rightSchema = Yup.object({
username: Yup.string().required('用户名不能为空')
});
2. 嵌套对象验证时数据结构不匹配
当验证规则中包含嵌套对象时，如果传入的数据没有对应的嵌套结构，也会触发该错误。比如验证规则中定义了address为对象类型，但是传入的数据中address是null或者字符串，就会报错。
正确的嵌套对象验证示例如下：
import * as Yup from 'yup';
const nestedSchema = Yup.object({
address: Yup.object({
city: Yup.string().required('城市不能为空'),
street: Yup.string().required('街道不能为空')
}).required('地址不能为空')
});
传入的数据需要符合结构：
const validData = {
address: {
city: '北京',
street: '长安街'
}
};
3. 动态设置验证规则时类型错误
如果在动态配置验证规则时，错误地将某个字段的验证类型设置为对象，而实际数据不是对象，也会出现该错误。比如在根据条件切换验证规则时，没有正确区分对象和普通类型的验证方法。
服务器端错误集成到Yup验证的流程
前端Yup验证只能覆盖部分规则，很多业务规则需要在服务器端校验，因此需要将服务器端返回的错误信息整合到Yup的验证反馈中。常见的集成方式有以下两种：
1. 验证通过后提交时捕获服务器错误
这种方式是在前端Yup验证通过后，再发起请求到服务器，如果服务器端返回验证错误，就将错误映射到对应的表单字段上。
以React和Formik结合Yup为例的示例代码：
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
const schema = Yup.object({
email: Yup.string().email('邮箱格式不正确').required('邮箱不能为空'),
password: Yup.string().min(6, '密码至少6位').required('密码不能为空')
});
const MyForm = () => {
const handleSubmit = async (values, { setErrors }) => {
try {
// 发起登录请求
await axios.post('https://ipipp.com/api/login', values);
alert('登录成功');
} catch (error) {
// 假设服务器返回的错误格式是 { email: '邮箱已注册', password: '密码错误' }
if (error.response && error.response.data) {
setErrors(error.response.data);
}
}
};
return (
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={schema}
onSubmit={handleSubmit}
>
<Form>
<div>
<label>邮箱</label>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />
</div>
<div>
<label>密码</label>
<Field name="password" type="password" />
<ErrorMessage name="password" component="div" />
</div>
<button type="submit">提交</button>
</Form>
</Formik>
);
};
export default MyForm;
2. 自定义Yup验证方法集成服务器错误
如果需要将服务器端错误作为Yup验证的一部分，比如在验证某个字段时先检查服务器端是否已经存在该值，可以自定义Yup的验证方法。
示例代码如下：
import * as Yup from 'yup';
import axios from 'axios';
// 自定义验证用户名是否已注册的验证方法
const checkUsernameExists = async (username) => {
try {
const res = await axios.get(`https://ipipp.com/api/check-username?username=${username}`);
return res.data.exists;
} catch (error) {
return false;
}
};
const schema = Yup.object({
username: Yup.string()
.required('用户名不能为空')
.test('username-exists', '用户名已注册', async (value) => {
if (!value) return true;
const exists = await checkUsernameExists(value);
return !exists;
})
});
注意事项
- 定义Yup验证规则时，要严格按照字段的实际数据类型选择对应的验证方法，避免错误使用
object()方法。 - 集成服务器端错误时，要注意错误格式的统一，确保能够正确映射到对应的表单字段。
- 自定义Yup验证方法时，如果是异步验证，要注意处理加载状态和错误情况，避免影响用户体验。