如何在JavaScript与HTML验证通过后跳转至其他网站？

一、先搞定验证环节 #

验证逻辑需要根据你的具体需求定制，常见场景包括输入框非空校验、格式校验（邮箱、手机号）、长度校验等。以下是两种典型场景的验证示例：

1. 表单提交时的验证

如果是通过表单触发操作，先阻止默认提交行为，再执行验证：

<form id="userForm">
  <input type="text" id="username" placeholder="用户名">
  <input type="email" id="userEmail" placeholder="邮箱">
  <button type="submit">确认跳转</button>
</form>

const form = document.getElementById('userForm');
const username = document.getElementById('username');
const userEmail = document.getElementById('userEmail');

form.addEventListener('submit', (e) => {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  let passValidation = true;
  const nameVal = username.value.trim();
  const emailVal = userEmail.value.trim();
  
  // 用户名非空校验
  if (!nameVal) {
    alert('请输入用户名');
    passValidation = false;
  }
  
  // 邮箱格式校验
  const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (!emailReg.test(emailVal)) {
    alert('请输入合法邮箱');
    passValidation = false;
  }
  
  // 验证通过则执行跳转
  if (passValidation) {
    // 替换为目标网站地址
    window.location.href = 'https://目标网站地址';
  }
});

2. 按钮点击触发的验证

如果是普通按钮触发，直接绑定点击事件做验证：

<input type="text" id="verifyCode" placeholder="输入验证码">
<button id="jumpBtn">验证并跳转</button>

const jumpBtn = document.getElementById('jumpBtn');
const verifyCode = document.getElementById('verifyCode');

jumpBtn.addEventListener('click', () => {
  const codeVal = verifyCode.value.trim();
  // 示例：验证验证码是否匹配（实际项目中可能调用接口校验）
  if (codeVal === 'ABC123') {
    // 跳转操作
    window.location.replace('https://目标网站地址');
  } else {
    alert('验证码错误，请重新输入');
  }
});

二、常用的跳转方式 #

验证通过后，根据需求选择合适的跳转方法：

• window.location.href = '目标地址'：最常用的跳转，浏览器保留当前页面历史，可通过后退按钮返回
• window.location.replace('目标地址')：替换当前页面的历史记录，无法后退到原页面
• window.open('目标地址', '_blank')：在新窗口打开目标地址（部分浏览器会拦截弹窗，建议在用户主动操作时使用）

验证环节注意事项 #

• 前端验证仅作辅助，务必配合后端验证，避免恶意绕过前端校验
• 可以替换alert为更友好的错误提示（比如在输入框下方显示文字提示）
• 复杂验证逻辑可封装成单独函数，提高代码复用性

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