如何在JavaScript验证表单后提交至register.php文件？

需求 #

通过JavaScript完成表单验证，验证全部通过后将表单提交至register.php文件。

修正后的HTML代码 #

先修复原代码里的标签闭合问题，若需要邮箱验证则补充对应输入框，同时优化事件绑定逻辑：

<form onsubmit="return validateForm()" action="register.php" method="post" class="sign-up-form">
  <div class="input-field">
    <input type="text" placeholder="Nome" name="username" id="username" onkeyup="validateName()" />
    <span id="name-error"></span>
  </div>

  <!-- 若需要邮箱验证，保留以下输入框；不需要则删除 -->
  <div class="input-field">
    <input type="email" placeholder="Email" name="email" id="email" onkeyup="validateEmail()" />
    <span id="email-error"></span>
  </div>

  <div class="input-field">
    <input name="password" type="password" placeholder="Password" id="password" onkeyup="validatePassw()" />
    <span id="passw-error"></span>
  </div>

  <input type="submit" class="btn" value="Registrati">
</form>

修正后的JavaScript验证代码 #

原validateForm函数缺少返回值，会导致验证不通过时表单仍提交。需让函数在所有验证通过时返回true，否则返回false，同时补充各字段的具体验证逻辑：

// 验证用户名
function validateName() {
  const username = document.getElementById('username').value;
  const errorElement = document.getElementById('name-error');
  if (username.trim() === '') {
    errorElement.textContent = '用户名不能为空';
    errorElement.style.color = 'red';
    return false;
  }
  errorElement.textContent = '';
  return true;
}

// 验证邮箱（不需要则删除此函数及相关调用）
function validateEmail() {
  const email = document.getElementById('email').value;
  const errorElement = document.getElementById('email-error');
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    errorElement.textContent = '请输入有效的邮箱地址';
    errorElement.style.color = 'red';
    return false;
  }
  errorElement.textContent = '';
  return true;
}

// 验证密码
function validatePassw() {
  const password = document.getElementById('password').value;
  const errorElement = document.getElementById('passw-error');
  if (password.length < 6) {
    errorElement.textContent = '密码长度不能少于6位';
    errorElement.style.color = 'red';
    return false;
  }
  errorElement.textContent = '';
  return true;
}

// 表单总验证
function validateForm() {
  const isNameValid = validateName();
  const isEmailValid = validateEmail(); // 不需要邮箱验证则删除此行
  const isPasswValid = validatePassw();

  // 所有验证通过才允许提交表单
  return isNameValid && isEmailValid && isPasswValid;
}

关键修改说明 #

• 修复了原HTML中用户名输入标签未闭合的问题
• 移除了提交按钮上重复的onclick事件，仅保留表单的onsubmit事件触发验证
• 给validateForm添加返回值，确保只有所有字段验证通过时才提交表单
• 补充了各字段的具体验证规则（原代码仅调用验证函数但未实现逻辑）

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