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

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("手机号码格式正确,可以提交!");
  }
});

总结

通过上述示例,我们可以看到如何实现JS的简单表单验证功能。我们需要通过getElementsByClassName函数获取表单元素,实现表单验证函数并添加事件监听来对表单信息进行验证,从而确保用户输入规则的正确性。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现的简单表单验证功能示例 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 一个不错的js html页面倒计时可精确到秒

    下面是“一个不错的JS HTML页面倒计时可精确到秒”的完整攻略。 1.准备工作 首先,要获取当前时间和未来的结束时间,并计算出两者之间的时间间隔。为了完成这个任务,我们需要使用JavaScript中的Date对象。 // 获取当前时间 var now = new Date(); // 获取未来结束时间 var end = new Date(‘2021/12…

    JavaScript 2023年5月27日
    00
  • js 数据存储和DOM编程

    JS 数据存储和 DOM 编程攻略 概述 JavaScript 是一种具有灵活性和交互性的编程语言,它在 Web 开发中扮演着重要的角色。其中,数据存储是支撑 Web 应用程序的关键之一,DOM 编程则是实现动态 Web 应用程序的重要手段之一。 本攻略将向您介绍如何使用 JS 实现数据存储和 DOM 编程的基本知识。本攻略分为以下两个部分: JS 数据存储…

    JavaScript 2023年6月10日
    00
  • JavaScript arguments.callee作用及替换方案详解

    JavaScript arguments.callee作用及替换方案详解 引言 在 JavaScript 中,我们经常会用到函数的 arguments 对象。使用 arguments 可以获取函数调用时传入的所有参数,而 arguments.callee 是 arguments 对象的一个属性,它引用当前函数本身。 在 ES5 中,arguments.cal…

    JavaScript 2023年6月10日
    00
  • 用python制作个音乐下载器

    制作一个音乐下载器需要完成以下几个步骤: 步骤一:确定下载的音乐网站 首先要确定下载的音乐网站,一般常见的网站包括QQ音乐、酷狗音乐、网易云音乐等。不同的网站采取的下载方式可能有所不同,因此需要先确定目标网站的下载方式。 步骤二:分析目标网站的下载方式 对于不同的网站,其下载方式可能存在差异,因此需要使用网络爬虫对网站进行分析,找到下载音乐的方式。常见的方案…

    JavaScript 2023年5月28日
    00
  • js显示世界时间示例(包括世界各大城市)

    下面就是“js显示世界时间示例(包括世界各大城市)”的完整攻略。 思路概述 本代码的主要思路是通过获取当前时间(即本地时间),将其转换为世界各大城市的对应时间,并在页面上显示出来。具体实现方法是使用 JavaScript 和 Moment.js 库。 实现步骤 引入 Moment.js 库 Moment.js 是一个 JavaScript 日期处理库,可以方…

    JavaScript 2023年5月27日
    00
  • js apply/call/caller/callee/bind使用方法与区别分析

    JS中的apply、call、caller、callee以及bind是函数对象的5个方法,它们可以帮助我们更加灵活地调用函数、改变函数的this指向以及传递参数。本文将详细讲解它们的使用方法和区别分析。 apply和call方法 apply和call方法用于调用一个函数,并且可以指定函数的this指向,同时还可以将参数以数组或者类数组的形式传递给函数。 ap…

    JavaScript 2023年6月10日
    00
  • javascript正则表达配置扩展名并实现验证

    以下是“javascript正则表达配置扩展名并实现验证”的完整攻略: 步骤一:学习正则表达式基础知识 正则表达式是一种用来描述字符串模式的规则。学习正则表达式的基础知识是进行验证扩展名的前提条件。以下是一些基本的正则表达式符号: .:匹配除了换行符以外的任意字符; +:匹配前一个字符的一次或多次出现; *:匹配前一个字符的零次或多次出现; ?:匹配前一个字…

    JavaScript 2023年6月10日
    00
  • js面向对象编程OOP及函数式编程FP区别

    一、OOP与FP概述 OOP(Object-oriented Programming)即面向对象编程,是一种编程范式,通过抽象出类来描述对象及其行为,并通过类的继承将代码组织成复杂的对象体系结构,从而使代码更加易于维护与扩展。 FP(Functional Programming)即函数式编程,是一种编程范式,重点在于函数,它将计算过程视为一系列的函数求值,通…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部