JS函数内表单验证后提交问题求助，返回true是否正确？

嘿，这位朋友，你的问题其实是表单提交逻辑里的典型场景，我帮你拆解一下：

首先，你现在的代码里用了event.preventDefault()，这直接阻止了表单的默认提交行为，所以哪怕验证通过，也不会自动提交——得咱们手动触发才行。另外你问的“函数末尾返回true”，这个要看你绑定事件的方式，我后面细说。

核心解决思路 #

• 把验证逻辑抽成独立函数：这样不管是外部调用还是提交时用，都很方便，也符合代码复用原则。
• 验证通过后手动提交表单：在点击事件里判断验证结果，通过的话直接调用表单元素的submit()方法。

完整代码示例 #

// 独立的验证函数，返回布尔值：true=验证通过，false=不通过
function validateForm() {
  // 获取表单字段
  const contactName = document.getElementById('contactName').value;
  const contactEmail = document.getElementById('contactEmail').value;
  // 其他字段...

  // 开始验证
  if (!contactName.trim()) {
    alert('请填写您的姓名');
    return false;
  }
  if (!/^\S+@\S+\.\S+$/.test(contactEmail)) {
    alert('请输入有效的邮箱地址');
    return false;
  }
  // 其他验证规则...

  // 所有验证通过，返回true
  return true;
}

// 获取表单和按钮元素
const submitBtn = document.getElementById('submitBtn');
const contactForm = document.getElementById('contactForm'); // 替换成你的表单ID

// 绑定点击事件
submitBtn.addEventListener('click', function(event) {
  event.preventDefault(); // 先阻止默认提交

  // 调用验证函数，通过则手动提交
  if (validateForm()) {
    contactForm.submit(); // 这里才是真正触发提交的关键
  }
});

关于“返回true”的疑问 #

你问的函数末尾返回true是不是正确方式，得分两种情况：

• 如果是给表单的onsubmit事件绑定函数（比如<form onsubmit="return validateForm()">），这时候返回true会允许表单默认提交，返回false会阻止——这种场景下返回true是有效的。
• 但你现在是给按钮的click事件绑定函数，而且已经用了event.preventDefault()，这时候函数返回什么都不会影响默认提交（因为已经被阻止了），必须用form.submit()手动触发。

额外注意事项 #

• 一定要确保你获取到了正确的表单元素，不然submit()会失效。
• 如果是异步提交（比如用fetch/ajax），那不需要调用form.submit()，直接在验证通过后发送请求就行。

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