JavaScript 完成注册页面表单校验的实例

下面是 JavaScript 完成注册页面表单校验的实例的完整攻略：

一、概述

在网站的注册页面中，为了防止用户输入错误或不符合规范的信息，通常需要进行表单校验。JavaScript 能够很好地完成这个任务。

二、前置知识

1. HTML 基础知识
2. JavaScript 基础知识

三、实现过程

1. 首先，在 HTML 中编写注册页面表单。

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <label for="confirm-password">确认密码：</label>
  <input type="password" id="confirm-password" name="confirm-password" required>
  <br>
  <button type="submit">注册</button>
</form>

1. 在 JavaScript 中编写表单校验逻辑。

const form = document.querySelector('form')
const emailInput = form.querySelector('#email')
const passwordInput = form.querySelector('#password')
const confirmPasswordInput = form.querySelector('#confirm-password')

form.addEventListener('submit', (event) => {
  event.preventDefault()

  if (!isEmailValid(emailInput.value)) {
    alert('请填写正确的邮箱地址')
    emailInput.focus()
    return
  }

  if (!isPasswordValid(passwordInput.value)) {
    alert('密码必须至少包含 8 个字符，其中包括大小写字母和数字')
    passwordInput.focus()
    return
  }

  if (passwordInput.value !== confirmPasswordInput.value) {
    alert('两次输入的密码不一致，请重新输入')
    confirmPasswordInput.focus()
    return
  }

  alert('注册成功！')
})

function isEmailValid(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
}

function isPasswordValid(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/.test(password)
}

以上代码中，form 是 HTML 中的注册表单，emailInput、passwordInput 和 confirmPasswordInput 分别是邮箱输入框、密码输入框和确认密码输入框。

1. 编写表单校验函数 isEmailValid 和 isPasswordValid 。 这两个函数分别用于校验邮箱和密码是否符合规范。

其中，isEmailValid 使用正则表达式，判断邮箱格式是否正确。isPasswordValid 同样使用正则表达式，判断密码是否至少包含 8 个字符，其中包括大小写字母和数字。

四、示例说明

以下是两个示例说明。

示例一

如何在用户输入错误的信息时，让错误输入框自动获得焦点？

答：当用户输入错误时，可以使用 alert 弹出提示框。同时，可以调用对应输入框的 focus 方法，让输入框自动获得焦点。

if (!isEmailValid(emailInput.value)) {
  alert('请填写正确的邮箱地址')
  emailInput.focus()
  return
}

示例二

如何在表单所有信息校验通过后，跳转到下一个页面？

答：可以使用 window.location.href 实现跳转。在表单所有信息校验通过后，设置 window.location.href 为跳转页面的 URL 地址即可。

if (passwordInput.value !== confirmPasswordInput.value) {
  alert('两次输入的密码不一致，请重新输入')
  confirmPasswordInput.focus()
  return
}

alert('注册成功！')
window.location.href = 'success.html'