JavaScript表单验证实现过程详解

下面我来详细讲解“JavaScript表单验证实现过程详解”的完整攻略。

什么是表单验证

表单验证指的是对用户在表单中输入的内容进行合法性校验，确保用户提交的内容符合要求，避免因用户提交不合法的数据而产生的诸多问题。

表单验证实现的步骤

实现表单验证的基本步骤如下：

1. 获取表单元素
2. 给表单元素添加提交事件
3. 在提交事件中获取表单元素的值
4. 对表单元素的值进行验证
5. 根据验证结果返回true或false

JavaScript表单验证实现过程

以简单的登录表单为例，来说明表单验证的实现过程。

首先，获取账号和密码输入框的元素：

var usernameInput = document.querySelector('#username');
var passwordInput = document.querySelector('#password');

接着，给表单元素添加提交事件，验证表单：

document.querySelector('#submit').addEventListener('click', function(e) {
  // 阻止表单的提交事件
  e.preventDefault();

  if (validateForm()) {
    alert('提交成功');
    // 提交表单
  }
});

// 表单验证函数
function validateForm() {
  // 获取输入框的值
  var username = usernameInput.value.trim();
  var password = passwordInput.value.trim();

  // 账号和密码均不能为空
  if (!username) {
    alert('请输入账号');
    return false;
  }
  if (!password) {
    alert('请输入密码');
    return false;
  }

  return true;
}

在表单提交事件中，第一步是阻止表单的默认提交事件，然后调用validateForm函数进行表单验证。

validateForm函数中首先获取账号和密码输入框的值，并使用trim方法去除前后空格。

然后判断账号和密码是否为空，如果为空，则弹出提示框并返回false，表示表单验证不通过。

最后，如果表单验证通过，则返回true，在表单提交事件中弹出成功提示并提交表单。

示例1：邮箱格式校验

下面以邮箱格式校验为例，对上面的代码进行修改：

document.querySelector('#submit').addEventListener('click', function(e) {
  // 阻止表单的提交事件
  e.preventDefault();

  if (validateForm()) {
    alert('提交成功');
    // 提交表单
  }
});

// 表单验证函数
function validateForm() {
  // 获取输入框的值
  var username = usernameInput.value.trim();
  var password = passwordInput.value.trim();

  // 账号和密码均不能为空
  if (!username) {
    alert('请输入账号');
    return false;
  }
  if (!password) {
    alert('请输入密码');
    return false;
  }

  // 邮箱格式校验正则表达式
  var emailReg = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;

  // 邮箱格式校验
  if (!emailReg.test(username)) {
    alert('请输入正确的邮箱地址');
    return false;
  }

  return true;
}

在validateForm函数中，我们添加了一个邮箱格式校验的部分。

首先定义了一个邮箱格式校验的正则表达式。

然后使用test方法，判断输入的账号是否符合邮箱格式。如果不符合，则弹出提示框并返回false。

示例2：密码长度限制

下面以密码长度限制为例，对上面的代码进行修改：

document.querySelector('#submit').addEventListener('click', function(e) {
  // 阻止表单的提交事件
  e.preventDefault();

  if (validateForm()) {
    alert('提交成功');
    // 提交表单
  }
});

// 表单验证函数
function validateForm() {
  // 获取输入框的值
  var username = usernameInput.value.trim();
  var password = passwordInput.value.trim();

  // 账号和密码均不能为空
  if (!username) {
    alert('请输入账号');
    return false;
  }
  if (!password) {
    alert('请输入密码');
    return false;
  }

  // 密码长度限制
  if (password.length < 6 || password.length > 20) {
    alert('密码长度必须为6到20个字符');
    return false;
  }

  return true;
}

在validateForm函数中，我们添加了一个对密码长度的限制。

如果密码的长度不符合要求，则弹出提示框并返回false。否则返回true，表单验证通过。

结语

通过上面的代码实例，我们可以看到，普通的表单验证其实并不难，并且在实际开发中，表单验证是必不可少的一部分。当然，这只是表单验证的基础知识，实际开发中还会存在更为复杂的情况，需要我们不断学习和实践。