如何仅在表单验证通过时使用Axios提交表单数据？

云上老周

2026-8-10

问题根源

你当前的提交逻辑里，if (handleSubmit)这个判断完全无效——因为handleSubmit是当前函数的引用，永远为真，所以不管表单有没有错误，都会触发Axios请求。正确的逻辑应该是验证表单无错误后再发送请求。

修复步骤

1. 修正提交逻辑（核心修复）

修改useCreateUser.jsx里的handleSubmit函数，先获取验证结果，判断错误对象是否为空，再决定是否发起请求：

const handleSubmit = e => {
    e.preventDefault();
    const validationErrors = validateNewUser(values); // 先拿到验证结果
    setErrors(validationErrors);

    // 只有当错误对象为空时，才发送请求
    if (Object.keys(validationErrors).length === 0) {
        const user = {
            firstName: values.firstName,
            lastName: values.lastName,
            email: values.email,
            password: values.password
        };
        // 替换为你的Mock API实际地址
        axios.post('你的Mock API URL', user)
            .then((response) => {
                console.log(response.data);
                // 可选：提交成功后重置表单
                setValues({
                    firstName: '',
                    lastName: '',
                    email: '',
                    password: ''
                });
            })
            .catch(err => {
                console.error('请求失败:', err);
            });
    }
}

2. 修复模板语法错误

你的CreateUser.jsx里的Button标签多了一个多余的}，修正为：

<Button type='submit'>Submit</Button>

3. 可选：添加实时验证（优化用户体验）

如果想在用户输入时就实时显示错误，而非等提交时才提示，可以在handleChange里也调用验证：

const handleChange = e => {
    const {name, value} = e.target;
    const newValues = {
        ...values,
        [name]: value
    };
    setValues(newValues);
    // 实时验证当前输入后的表单状态
    setErrors(validateNewUser(newValues));
};

为什么这样有效？

validateNewUser函数在表单有错误时返回包含错误信息的对象，无错误时返回空对象
Object.keys(validationErrors).length === 0可以准确判断表单是否验证通过
实时验证能让用户即时看到错误，减少提交错误表单的概率

内容的提问来源于stack exchange，提问作者TheStudentMans