模态表单验证异常：提交后页面刷新且未聚焦空输入框

你的问题核心有两个：页面自动刷新导致焦点丢失，以及alert弹窗干扰焦点设置，下面是具体修复方案：

1. 阻止表单默认提交行为 #

页面刷新是因为浏览器触发了表单的默认提交动作，即便你在函数里return false，如果绑定方式不对也无法生效。

两种绑定方式修复： #

• 方式一：修改HTML提交按钮
  把提交按钮的onclick改为：

<button type="submit" onclick="return submitForm()">提交</button>

如果是<input>类型的提交按钮：

<input type="submit" onclick="return submitForm()">

• 方式二：在函数内阻止默认事件
  如果用jQuery绑定表单提交事件，直接在函数开头阻止默认行为：

function submitForm(event) {
  // 先阻止浏览器默认的表单提交动作
  event.preventDefault();
  
  // 后续验证代码...
}

对应的HTML表单绑定：

<form onsubmit="submitForm(event)">
  <!-- 表单输入框内容 -->
</form>

2. 修复输入框焦点失效问题 #

alert弹窗会抢占浏览器焦点，关闭弹窗后原本设置的focus可能不生效，推荐两种处理方式：

方式一：替换alert为页面内提示（更友好） #

用页面内置的提示元素替代alert，避免焦点干扰：

// 先在页面添加一个提示容器：
// <div id="form-alert" style="color:red;display:none;margin:10px 0;"></div>

function submitForm(event) {
  event.preventDefault();
  const alertEl = $('#form-alert');
  var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
  var name = $('#Input1_username').val();
  var email = $('#Input2_email').val();
  var password = $('#Input3_password').val();
  var confirmPassword = $('#Input4_Cpassword').val();

  if(name.trim() === '' ){
    alertEl.text('请输入您的姓名').show();
    $('#Input1_username').focus();
    return;
  }else if(email.trim() === '' ){
    alertEl.text('请输入您的邮箱').show();
    $('#Input2_email').focus();
    return;
  }else if(email.trim() !== '' && !reg.test(email)){
    alertEl.text('请输入有效的邮箱地址').show();
    $('#Input2_email').focus();
    return;
  }else if(password.trim() === '' ){
    alertEl.text('请输入密码').show();
    $('#Input3_password').focus();
    return;
  }else if(confirmPassword.trim() === '' ){
    alertEl.text('请确认密码').show();
    $('#Input4_Cpassword').focus();
    return;
  }else if(confirmPassword !== password){
    alertEl.text('两次输入的密码不一致').show();
    $('#Input4_Cpassword').focus();
    return;
  }else{
    alertEl.hide();
    // 验证通过后执行提交逻辑，比如：
    // $('form')[0].submit();
  }
}

方式二：延迟设置焦点（如果必须用alert） #

利用setTimeout让焦点在alert关闭后再执行：

function submitForm(event) {
  event.preventDefault();
  var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
  var name = $('#Input1_username').val();
  var email = $('#Input2_email').val();
  var password = $('#Input3_password').val();
  var confirmPassword = $('#Input4_Cpassword').val();

  if(name.trim() === '' ){
    alert('请输入您的姓名');
    setTimeout(() => $('#Input1_username').focus(), 10);
    return;
  }else if(email.trim() === '' ){
    alert('请输入您的邮箱');
    setTimeout(() => $('#Input2_email').focus(), 10);
    return;
  }else if(email.trim() !== '' && !reg.test(email)){
    alert('请输入有效的邮箱地址');
    setTimeout(() => $('#Input2_email').focus(), 10);
    return;
  }else if(password.trim() === '' ){
    alert('请输入密码');
    setTimeout(() => $('#Input3_password').focus(), 10);
    return;
  }else if(confirmPassword.trim() === '' ){
    alert('请确认密码');
    setTimeout(() => $('#Input4_Cpassword').focus(), 10);
    return;
  }else if(confirmPassword !== password){
    alert('两次输入的密码不一致');
    setTimeout(() => $('#Input4_Cpassword').focus(), 10);
    return;
  }else{
    alert('验证通过');
    // 提交表单
    // $('form')[0].submit();
  }
}

3. 额外优化建议 #

• 给未填写的输入框添加样式提示（比如红色边框），让用户更直观看到问题项
• 用$.trim()替代原生trim()，兼容部分旧浏览器

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