JavaScript表单validate函数失效，点击按钮无弹窗问题排查

代码示例 #

JavaScript 代码 #

function submitForm() {
  document.getElementById("form1").submit();
}

function validate() {
  var ValidName = /^[a-zA-Z ]{2,30}$/;
  var phoneno = /^\d{10}$/;
  var mailformat = /^[a-zA-Z0-9.!#$%&'+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)$/;
  var ValidAddress = /^[a-zA-Z0-9\s,'-]+$/;
  var cityRegex = /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/
  var validPostcode = /^[0-9]+$/;
  var ValidMessage = /^[a-zA-Z0-9\s,'-]+$/;
  var a = document.forms["form1"]["message"].value;

  if (!document.getElementById("username").value.match(ValidName)) {
    alert("Please Enter A Valid First Name");
    return false;
  }

  if (!document.getElementById("password").value.match(ValidName)) {
    alert("Please Enter A Valid Last Name");
    return false;
  }
  alert({"success"}); // 此处存在语法错误
}

function success() {
  alert("success")
}

HTML 代码 #

<form class="login-form" action="#" name="form1" id="form1">
  <input type="text" id="username" name="username" placeholder="username">
  <input type="text" id="password" name="password" placeholder="password">
  <button onclick="validate()">Login</button>
  <p class="message">Not registered? <a href="Register.html">Create an account</a> </p>
</form>

问题原因 #

1. 按钮默认触发表单提交：表单内的<button>元素默认类型为submit，点击后会立即触发表单提交动作（因action="#"，页面跳转至顶部），直接中断validate函数的执行流程，导致提示框来不及显示就刷新了页面。
2. validate函数存在语法错误：alert {"success"};是无效语法，正确写法应为alert("success");，语法错误会直接导致函数执行中断。
3. 未阻止表单默认提交行为：即便validate返回false，由于按钮默认是submit类型，表单仍会执行提交动作，无法保留验证提示的显示状态。

修复方案 #

方案一：修改按钮类型为button #

将按钮类型设为button，避免触发表单默认提交：

<button type="button" onclick="validate()">Login</button>

同时修正validate里的语法错误：

// 替换原错误代码
alert("success");

方案二：在validate中阻止默认行为 #

保留按钮默认类型，调用validate时传递事件对象并阻止默认提交：

<button onclick="event.preventDefault(); validate()">Login</button>

或者在validate函数内处理：

function validate(event) {
  event.preventDefault(); // 阻止表单提交
  // 其余代码不变
  // 修正alert语法
  alert("success");
}

对应HTML修改为：

<button onclick="validate(event)">Login</button>

额外优化：增强空值判断 #

在正则匹配前先判断字段是否为空，提升用户体验：

const usernameInput = document.getElementById("username");
if (!usernameInput.value.trim()) {
  alert("Please enter your username");
  return false;
} else if (!usernameInput.value.match(ValidName)) {
  alert("Please Enter A Valid First Name");
  return false;
}

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