JS实现的简单表单验证功能示例攻略

简介

表单验证是网页开发中非常常见的功能，JS可以有效实现表单信息的验证，并提示用户输入规则是否满足。本文将介绍JS实现的简单表单验证功能示例，并通过两个具体实例进行说明。

实现过程

一、获取表单元素

在JS中，我们需要通过getElementsByClassName函数获取表单元素。例如验证用户名和密码的表单：

  <form class="login-form">
    <input class="input-username" type="text" placeholder="请输入用户名">
    <input class="input-password" type="password" placeholder="请输入密码">
    <button class="submit-btn" type="submit">登录</button>
  </form>

在JS中获取用户名和密码输入框元素可以如下：

const userName = document.querySelector(".input-username");
const password = document.querySelector(".input-password");

二、实现表单验证函数

接下来需要实现表单验证函数。例如验证用户名和密码：

const validate = (userName, password) => {
  if (userName.value.length < 5 || userName.value.length > 12) {
    alert("用户名长度必须在5~12之间");
    return false;
  }
  if (password.value.length < 6 || password.value.length > 20) {
    alert("密码长度必须在6~20之间");
    return false;
  }
  return true;
}

三、添加事件监听

在获取表单元素和实现表单验证函数后，需要为表单添加事件监听。例如：

const loginForm = document.querySelector(".login-form");
loginForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (validate(userName, password)) {
    alert("表单验证通过，可以提交!");
  }
});

示例说明

示例一：验证邮箱格式

<form class="email-verify-form">
  <input class="input-email" type="email" placeholder="请输入您的邮箱">
  <button class="submit-btn" type="submit">验证</button>
</form>

在JS中获取邮箱输入框元素：

const emailInput = document.querySelector(".input-email");

实现邮箱格式验证函数：

const verifyEmail = (emailInput) => {
  const emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  if (emailPattern.test(emailInput.value)) {
    return true;
  } else {
    alert("邮箱格式不正确");
    return false;
  }
}

为表单添加事件监听：

const emailVerifyForm = document.querySelector(".email-verify-form");
emailVerifyForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (verifyEmail(emailInput)) {
    alert("邮箱格式正确，可以提交!");
  }
});

示例二：验证手机号码格式

<form class="phone-verify-form">
  <input class="input-phone" type="tel" placeholder="请输入您的手机号码">
  <button class="submit-btn" type="submit">验证</button>
</form>

在JS中获取手机号码输入框元素：

const phoneInput = document.querySelector(".input-phone");

实现手机号码格式验证函数：

const verifyPhone = (phoneInput) => {
  const phonePattern = /^[1]([3-9])[0-9]{9}$/;
  if (phonePattern.test(phoneInput.value)) {
    return true;
  } else {
    alert("手机号码格式不正确");
    return false;
  }
}

为表单添加事件监听：

const phoneVerifyForm = document.querySelector(".phone-verify-form");
phoneVerifyForm.addEventListener("submit", (e) => {
  e.preventDefault();
  if (verifyPhone(phoneInput)) {
    alert("手机号码格式正确，可以提交!");
  }
});