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日

相关文章

  • vue-music关于Player播放器组件详解

    vue-music关于Player播放器组件详解 Vue-music是一款基于Vue.js的音乐WebApp,它的开源代码也被广泛使用于其他Vue项目中。其Player播放器组件是整个应用中最核心的组件之一,本文将对其进行详细的解析和介绍。 功能模块 Player播放器组件具有以下功能模块: 播放、暂停、上一曲、下一曲等基本音乐播放操作; 歌曲封面、歌词、进…

    JavaScript 2023年6月11日
    00
  • js使用Array.prototype.sort()对数组对象排序的方法

    下面是“js使用Array.prototype.sort()对数组对象排序的方法”的详细攻略: 1. Array.prototype.sort()方法介绍 Array.prototype.sort() 方法用于对数组进行排序。默认情况下按照字符串的 Unicode 码点进行排序。 语法 array.sort([compareFunction]) 参数说明: …

    JavaScript 2023年5月27日
    00
  • 详解element-ui中form验证杂记

    下面我将详细讲解关于element-ui中form验证的攻略。 一、前言 在前后端分离的开发中,前端对数据的验证尤为重要。element-ui提供了许多常用的表单验证功能,本文将详解其使用方法。 二、需求分析 本次验证需求如下: 用户名:非空,长度在3~20个字符之间 密码:非空,6~18个字符 确认密码:必须与密码保持一致 三、实现方法 1. 使用elem…

    JavaScript 2023年6月10日
    00
  • 详解Javascript中的Object对象

    详解Javascript中的Object对象 什么是Object对象? 在Javascript中,Object是一种非常常见的数据类型。可以说,Object是Javascript中最重要的一个对象之一。 它是由一组无序的键值对组成的,其中键必须是字符串类型,值可以是任意类型,包括数字、字符串、布尔型、函数、内置对象等。 创建Object对象 创建一个空的Ob…

    JavaScript 2023年6月10日
    00
  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解 什么是微信小程序全局文件 微信小程序中,全局文件是指 app.js、app.json 和 app.wxss,它们分别用于配置小程序的全局信息、全局样式和全局脚本。这些文件都处于小程序的根目录下,并且是小程序初始化时自动载入的,所以我们可以在全局文件中定义小程序的整体风格和功能。 app.json app.json 是小程序的全局…

    JavaScript 2023年6月11日
    00
  • JavaScript中instanceof运算符的用法总结

    标题:JavaScript中instanceof运算符的用法总结 1. 简介 在JavaScript中,instanceof是一种语法特性,用于检查一个实例是否属于某个类或原型链中的某一级原型对象。该运算符通常被用来判断变量类型、判断是否为某个类的实例等。 2. 语法 instanceof 运算符的语法如下: object instanceof constr…

    JavaScript 2023年6月10日
    00
  • 基于JavaScript判断两个对象内容是否相等

    要基于JavaScript判断两个对象内容是否相等,一般可以采用以下几个方法: 1. 使用JSON.stringify()方法 可以使用JSON.stringify()方法将对象转化成字符串,再比较两个对象的字符串是否相等,代码如下: const obj1 = { name: "Tom", age: 18 }; const obj2 = …

    JavaScript 2023年5月27日
    00
  • safari,opera嵌入iframe页面cookie读取问题解决方法

    使用 iframe 嵌入页面时,不同浏览器对 cookie 的处理方式有所不同,其中 Safari 和 Opera 会有 cookie 跨域问题,但这个问题可以通过添加响应的 HTTP 头来解决。 具体的解决方案如下: 方法一:设置相同的域名 将外层页面和嵌入的 iframe 页面设置相同的域名,这样就算是跨域请求,浏览器也会将 cookie 存储到相同的域…

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