工作中常用到的JS表单验证代码(包括例子)

让我们来详细讲解一下工作中常用到的JS表单验证代码。

1. 前言

在现代Web应用程序中,表单是非常重要的一部分。表单的验证是保证用户数据输入的准确性和安全性的重要手段之一。JavaScript的表单验证是一种常见的方式,能够迅速的检测并提示用户错误输入信息。

2. 表单验证的基本原则

在讲解具体的JS表单验证代码之前,我们先来了解一下表单验证的基本原则。

  • 必填项验证:表单中的必填项必须填写正确的信息,否则需要进行提示。
  • 长度验证:表单中输入的字符数量需要满足特定的范围,例如密码长度需要在6-20之间等等。
  • 格式验证:表单的输入需要符合特定的格式要求,例如手机号码只能输入数字,Email需要包含@符号等等。
  • 数据类型验证:表单中的数字或日期等需要保证类型正确,例如出生日期需要是时间类型,年龄需要是数字类型等等。
  • 一致性验证:表单中的内容需要与其它的表单项保持一致,例如两次密码输入需要一致。

3. 常用表单验证代码示例

下面将通过两个常用的表单验证代码示例来展示如何在实际开发中使用JS实现表单验证的功能。

示例1:密码必须包含数字和字母

<form id="registerForm">
  <div>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"/>
  </div>
  <div>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"/>
  </div>
  <div>
    <label for="password-confirm">确认密码:</label>
    <input type="password" id="password-confirm" name="password-confirm"/>
  </div>
  <button type="submit">注册</button>
</form>
document.querySelector('#registerForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const username = document.querySelector('#username').value.trim();
  const password = document.querySelector('#password').value.trim();
  const confirmPassword = document.querySelector('#password-confirm').value.trim();

  if (!username) {
    alert('用户名不能为空');
    return;
  }

  if (!password) {
    alert('密码不能为空');
    return;
  }

  if (password.length < 6 || password.length > 20) {
    alert('密码长度需要在6-20之间');
    return;
  }

  if (!/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]/.test(password)) {
    alert('密码必须包含数字和字母');
    return;
  }

  if (password !== confirmPassword) {
    alert('确认密码需要与密码一致');
    return;
  }

  alert('注册成功');
});

在上面的示例中,我们通过针对表单的ID值和判断submit表单事件的方式获取了表单中的用户名、密码、确认密码等参数,然后分别进行了必填项验证、格式验证、长度验证等操作。其中,检测密码是否包含数字和字母这一部分使用了正则表达式进行了实现。

示例2:邮箱验证

<form id="subscribeForm">
  <div>
    <label for="email">邮箱地址:</label>
    <input type="text" id="email" name="email" />
  </div>
  <button type="submit">订阅</button>
</form>
document.querySelector('#subscribeForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const email = document.querySelector('#email').value.trim();

  if (!email) {
    alert('请输入正确的邮箱地址');
    return;
  }

  if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email)) {
    alert('邮箱格式不正确');
    return;
  }

  alert('感谢您的订阅');
});

在上面示例中,我们先获取了表单中的邮箱地址,并进行了必填项验证和格式验证,这里使用了常见的邮箱地址正则表达式验证方式,验证通过后则进行提交动作。

4. 总结

通过上述两个示例,我们了解了JS实现表单验证的基本思路和常用代码技巧。在实际开发过程中,需要针对具体的表单验证需求进行相应的代码编写。当然,还有很多其它的表单验证场景需要我们去思考,例如验证码的实现、分组表单的验证等等。我们需要不断的学习和实践,才能编写出更加健壮可靠的表单验证代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:工作中常用到的JS表单验证代码(包括例子) - Python技术站

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

相关文章

  • JS判断时间段的实现代码

    要实现JS判断时间段的功能,需要以下几个步骤: 获取当前时间:可以使用JavaScript中的Date()对象来获取当前时间。例如:var now = new Date() 得到当前时间在一天中的小时数:可以通过now.getHours()方法获取当前时间的小时数。 根据小时数来判断时间段:一般将一天24小时分为四个时间段,即早上、上午、下午和晚上四个时间段…

    JavaScript 2023年5月27日
    00
  • 用move.js库实现百叶窗特效

    使用move.js库实现百叶窗特效可以通过以下步骤进行操作: 1. 引入move.js库 在 HTML 文件头部添加以下代码来引入 move.js 库: <script src="https://cdn.bootcdn.net/ajax/libs/move.js/0.5.3/move.min.js"></script&g…

    JavaScript 2023年6月10日
    00
  • JavaScript 操作宏任务与微任务

    JavaScript 引擎在执行任务时,有两种类型的任务:宏任务(macro task)和微任务(micro task)。它们之间的差别在于执行顺序和触发方式,因此理解它们的区别很重要,也有助于我们编写更高效、优雅的代码。 什么是宏任务和微任务? 在 JavaScript 中,宏任务可以理解为当前执行栈中的任务,例如 script(整体代码)、setTime…

    JavaScript 2023年5月28日
    00
  • 日期 时间js控件

    下面我来详细讲解“日期时间JS控件”的完整攻略。 什么是日期时间JS控件 日期时间JS控件,也称为日期选择器、时间选择器,是一种用于在网页中选择日期和时间的工具。它通常是由JS代码和CSS样式组成,可以根据需求定制外观和交互方式。 常见的日期时间控件有DatePicker、DateTimePicker、TimePicker等。 如何使用日期时间JS控件 使用…

    JavaScript 2023年5月27日
    00
  • JavaScript Dom 绑定事件操作实例详解

    JavaScript Dom 绑定事件操作实例详解 什么是事件绑定? 当用户与页面交互时,如鼠标点击、鼠标滑过、键盘输入等操作,页面会自动产生相应的事件。通过 JavaScript 绑定事件,可以在用户进行相关操作时触发特定的 JavaScript 代码,并实现页面与用户的交互。 如何进行事件绑定? 事件绑定可以通过原生 JavaScript 和库/框架两种…

    JavaScript 2023年6月10日
    00
  • JavaScript实现烟花绽放动画效果

    下面就是JavaScript实现烟花绽放动画效果的完整攻略。 前置知识 在进行本教程之前,你需要掌握以下的前置知识: HTML、CSS基础 JavaScript基础语法 Canvas基础 如果你还不熟悉这些,可以先去学习一下。 实现思路 要实现烟花绽放动画效果,我们需要做以下的一些事情: 在页面中创建一个Canvas元素,用来绘制烟花图案。 监听鼠标点击事件…

    JavaScript 2023年6月10日
    00
  • JavaScript表单通过正则表达式验证电话号码

    以下是JavaScript表单通过正则表达式验证电话号码的完整攻略: 1. 理解正则表达式 正则表达式是一种表示文本模式的方法,可以用于搜索、替换和验证字符串。在JavaScript中,可以使用RegExp对象来创建正则表达式。常用的正则表达式元字符包括: ^ 匹配字符串开头 $ 匹配字符串结尾 . 匹配除换行符外的任意字符 \d 匹配数字 + 匹配前面的元…

    JavaScript 2023年6月10日
    00
  • JS控制TreeView的结点选择

    控制TreeView结点选择的方法主要有以下两种: 使用JavaScript代码控制TreeView的结点选择 可以通过JS控制TreeView的checkbox,从而实现TreeView的选择控制。具体实现过程如下: (1)获取TreeView的DOM结构 <asp:TreeView ID="TreeView1" runat=&q…

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