纯JS实现表单验证实例

下面是“纯JS实现表单验证实例”的完整攻略：

概述

在网站开发中，表单验证是一个必不可少的功能之一。通过表单验证，可以确保用户输入的数据的正确性和安全性，并且提高网站的交互体验。本篇攻略将详细介绍如何使用纯JS实现表单验证，并提供两个示例说明。

实现步骤

1. 获取表单元素和相关参数
   在JS脚本中使用document.getElementById()等方法获取需要验证的表单元素，并定义相关验证规则和提示信息。

2. 编写验证函数
   根据需求编写相应的表单验证函数，并在函数中使用正则表达式等方法进行数据格式的验证。验证成功后，可以通过修改元素的innerHTML等属性来修改提示信息。

3. 绑定事件监听
   使用addEventListener()等方法给表单元素绑定相应的事件监听，如blur、change、submit等事件。

4. 表单提交前做出验证措施
   在表单提交前，使用preventDefault()等方法阻止表单的默认提交事件，并在验证成功后提交表单，如form.submit()等方法。

示例说明

示例一：邮箱地址验证

在此示例中，我们需要验证用户输入的邮箱地址格式是否正确。

1. 获取表单元素和相关参数

const email = document.getElementById('email');
const emailMsg = document.getElementById('email-message');
const emailPattern = /^[\w+.-]+@[\w.-]+\.[a-zA-Z]{2,}$/;

其中，email是获取到的表单元素，emailMsg是用于显示提示信息的相关元素，emailPattern是用于验证邮箱格式的正则表达式。

1. 编写验证函数

function validateEmail() {
  if (!emailPattern.test(email.value)) {
    emailMsg.innerHTML = '请输入正确的邮箱地址';
    return false;
  } else {
    emailMsg.innerHTML = '';
    return true;
  }
}

该函数将在用户输入时触发进行验证。如果邮箱格式不正确，则修改提示信息；否则，提示信息置空。

1. 绑定事件监听

email.addEventListener('blur', validateEmail);

该代码将在用户输入完邮箱地址后触发验证。

1. 表单提交前做出验证措施

form.addEventListener('submit', function(e) {
  if (!validateEmail()) {
    e.preventDefault();
  } else {
    this.submit();
  }
})

该代码将在表单提交前进行邮箱地址的验证。如果验证失败，则阻止表单提交，否则进行表单提交。

示例二：密码验证

在此示例中，我们需要验证用户输入的密码是否符合一定的安全规范。

1. 获取表单元素和相关参数

const password = document.getElementById('password');
const passwordMsg = document.getElementById('password-message');
const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;

其中，password是获取到的表单元素，passwordMsg是用于显示提示信息的相关元素，passwordPattern是用于验证密码格式的正则表达式。该表达式要求密码长度不少于8位，同时至少包含一个字母和一个数字。

1. 编写验证函数

function validatePassword() {
  if (!passwordPattern.test(password.value)) {
    passwordMsg.innerHTML = '密码不符合安全规范，须包含字母和数字，且长度不少于8位';
    return false;
  } else {
    passwordMsg.innerHTML = '';
    return true;
  }
}

该函数将在用户输入时触发进行验证。如果密码格式不正确，则修改提示信息；否则，提示信息置空。

1. 绑定事件监听

password.addEventListener('blur', validatePassword);

该代码将在用户输入完密码后触发验证。

1. 表单提交前做出验证措施

form.addEventListener('submit', function(e) {
  if (!validatePassword()) {
    e.preventDefault();
  } else {
    this.submit();
  }
})

该代码将在表单提交前进行密码的验证。如果验证失败，则阻止表单提交；否则，进行表单提交。

以上就是使用纯JS实现表单验证的完整攻略了。在实际开发中，可以根据具体需求进行相应的扩展和优化。