Vue 3 表单验证：确保仅在无错误时提交数据-js教程-PHP中文网

本文详解如何在 Vue 3 中实现表单前端验证，通过返回布尔值控制 fetch 提交逻辑，确保只有所有字段校验通过后才发送请求，避免无效或不完整数据提交。

本文详解如何在 vue 3 中实现表单前端验证，通过返回布尔值控制 `fetch` 提交逻辑，确保只有所有字段校验通过后才发送请求，避免无效或不完整数据提交。

在 Vue 3 中进行表单验证，核心在于将校验逻辑与提交行为解耦，并利用校验结果决定是否执行异步提交。你当前的代码已具备基础校验能力（如空值检查、正则匹配），但缺少关键一步：根据校验结果阻断提交流程。

✅ 正确做法：让 validate() 返回校验状态

修改 validate 函数，使其不仅收集错误，还返回一个布尔值表示表单是否有效：

const validate = () => {
  errors.value = [];

  if (!formData.phone) {
    errors.value.push({ message: 'Phone number is missing' });
  } else if (!/^\d{8,15}$/.test(formData.phone)) { // 更健壮的手机号正则（支持8–15位数字）
    errors.value.push({ message: 'Please enter a valid phone number' });
  }

  if (!formData.name) {
    errors.value.push({ message: 'Name is missing' });
  } else if (formData.name.trim().length <blockquote><p>? 提示：使用 formData.name.trim().length 可防止用户仅输入空格导致校验绕过；手机号正则建议放宽至 ^\d{8,15}$，兼顾国际号码与常见长度。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1140" title="Vue"><img
														src="https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg" alt="Vue" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="overflowclass">Vue</a>
													<p class="overflowclass">避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill1140" title="Vue" 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 = async (e) => {
  e.preventDefault(); // 确保已存在（@submit.prevent 已处理，但显式调用更安全）

  const isValid = validate();

  if (!isValid) {
    console.warn('Form validation failed. Submission aborted.');
    return; // ❌ 阻止后续执行
  }

  try {
    const response = await fetch('YOUR_API_ENDPOINT', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData) // ⚠️ 注意：原代码中直接传 formData 对象会失败，必须序列化为 JSON 字符串
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    console.log('Submission successful:', await response.json());
    // ✅ 可选：重置表单或显示成功提示
    // Object.assign(formData, { name: '', phone: '', message: '', subject: 'general' });
    // errors.value = [];
  } catch (err) {
    console.error('Submission failed:', err);
    // ✅ 可选：显示网络错误提示
  }
};

? 关键修正点：

body: JSON.stringify(formData)：fetch 的 body 必须是字符串、Blob 或 FormData，直接传对象会报错；

添加 async/await 和 try...catch：提升健壮性，捕获网络异常；

显式 e.preventDefault()：虽有 @submit.prevent，但在函数内保留更符合防御性编程习惯。