本文详解如何在 Vue 3 中实现表单前端验证，并阻止无效表单提交——通过 validate() 返回布尔值控制 fetch 请求触发时机，确保仅当所有字段校验通过后才发起 API 调用。
本文详解如何在 vue 3 中实现表单前端验证，并阻止无效表单提交——通过 `validate()` 返回布尔值控制 `fetch` 请求触发时机，确保仅当所有字段校验通过后才发起 api 调用。
在 Vue 3 中，表单验证的核心逻辑在于将校验结果与提交行为解耦：验证函数不仅要收集错误信息，还应明确返回校验是否通过的状态（true/false），从而让提交逻辑（如 fetch）具备条件执行能力。你当前的代码已实现了错误收集（errors.value），但缺少对校验结果的判断，导致即使存在错误，fetch 仍会执行。
✅ 正确做法：让 validate() 返回布尔值
修改 validate 函数，使其在所有校验通过时返回 true，否则返回 false：
const validate = () => {
errors.value = []; // 清空历史错误
// 手机号校验
if (!formData.phone) {
errors.value.push({ message: 'Phone number is missing' });
} else if (!/^\d{10}$/.test(formData.phone)) { // 建议更严格：10位纯数字
errors.value.push({ message: 'Please enter a valid 10-digit phone number' });
}
// 姓名校验
if (!formData.name) {
errors.value.push({ message: 'Name is missing' });
} else if (formData.name.trim().length <blockquote><p>? 提示：正则 /^\d{10}$/ 比 /^\d+$/ 更合理，避免过短或过长号码；同时使用 .trim() 防止空格干扰长度判断。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8025" title="Ainative Vue Sdk"><img
src="https://img.php.cn/upload/skill/000/000/081/179180111122467.jpg" alt="Ainative Vue Sdk" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8025" title="Ainative Vue Sdk" class="overflowclass">Ainative Vue Sdk</a>
<p class="overflowclass">使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……</p>
</div>
<a rel="nofollow" href="/xiazai/skill8025" title="Ainative Vue Sdk" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></blockquote><h3>✅ 更新 send 方法：仅在验证通过时提交</h3><pre class="brush:php;toolbar:false;">const send = (e) => {
e.preventDefault(); // 确保已通过 @submit.prevent，但双重保险更稳妥
const isValid = validate();
if (isValid) {
console.log('Form submitted:', formData);
fetch('URL', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
// ⚠️ 注意：formData 是 reactive 对象，需转为 plain object 再序列化
body: JSON.stringify(formData)
})
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.catch(err => {
console.error('Submission failed:', err);
// 可选：显示提交失败提示
});
}
// 若 isValid 为 false，表单不提交，错误信息已渲染在页面上
};? 关键修正：原代码中 body: formData 会报错，因为 fetch 的 body 必须是字符串、Blob 等可序列化类型。务必使用 JSON.stringify(formData)。
✅ 增强用户体验（推荐补充）
- 实时反馈：为输入框添加 :class="{ 'invalid': errors.some(e => e.message.includes('name')) }" 动态样式；
- 禁用提交按钮：，避免重复点击；
- 聚焦首个错误字段：errors.value.length && document.getElementById('name')?.focus()（需配合 ref 或 id）；
- 支持 subject === 'support' 场景：当前逻辑中该分支不校验也不提交，符合业务需求，无需额外验证。
? 总结
表单验证不是“展示错误”就结束，而是构建一个可决策的验证契约：
✅ validate() 负责校验 + 清空错误 + 返回布尔结果；
✅ send() 负责调用 validate() 并依据返回值决定是否执行 fetch；
✅ 始终确保 fetch 的 body 是合法 JSON 字符串；
✅ 结合 UI 状态（如禁用按钮、高亮错误字段）提升交互健壮性。
这样，你的表单就真正实现了「有错不发、无错才交」的可靠验证流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
