工作中常用到的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日

相关文章

  • 微信公众号获取用户地理位置并列出附近的门店的示例代码

    让我来给你详细讲解“微信公众号获取用户地理位置并列出附近的门店的示例代码”的完整攻略。 1. 前提条件 在进行此功能的实现前,需要满足以下条件: 已经拥有微信公众号; 已经获取了微信公众平台接口使用权限,并且对接口调用进行了配置。 2. 实现过程 2.1 第一步:获取用户地理位置 在微信公众平台,可以通过调用wx.getLocation接口,获取用户的地理位…

    JavaScript 2023年6月11日
    00
  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解 本文主要介绍了在微信小程序中进行文件上传和下载的操作,包括上传和下载的基本流程、代码实现的步骤以及示例演示等。 文件上传基本流程 文件上传的基本流程包括: 创建文件上传组件和触发上传事件。 选择要上传的文件。 获取上传文件的tempFilePath。 发送上传请求。 处理上传成功或上传失败的结果。 文件上传代码…

    JavaScript 2023年5月19日
    00
  • Three.js实现雪糕地球的使用示例详解

    首先,为了使用Three.js实现雪糕地球,我们需要在网站中引入Three.js库,可以通过以下代码在HTML文件中引入: <script src="./js/three.min.js"></script> 为了呈现一个球形地球,我们使用Three.js中的球体(SphereGeometry)并将其放置在场景(Sc…

    JavaScript 2023年6月11日
    00
  • 深入理解JS中的substr和substring

    深入理解JS中的substr和substring 在JavaScript字符串操作中,substr()和substring()是两个常用的函数,都用来截取字符串。但在具体应用场景和实现方式有所不同,因此需要深入理解其差异。 substr() substr()函数接受两个参数,第一个参数是截取的起始位置,第二个参数是截取的长度。如果省略第二个参数,则默认截取至…

    JavaScript 2023年6月11日
    00
  • DOM 基本方法

    DOM(Document Object Model,文档对象模型)是一套对 HTML 和 XML 文档的编程接口,它把整个文档抽象成一组“节点”和“对象”结构(包括元素、属性、文本等),开发者可以利用 DOM API 对页面进行增删改查等操作。 DOM 的基本方法主要有以下几类: 1. 获取元素对象 getElementById() getElementBy…

    JavaScript 2023年6月10日
    00
  • JavaScript中关于数组的调用方式

    JavaScript中的数组是一组值的有序集合,可以通过数字索引来访问这些值。在JavaScript中,数组可以通过几种不同的方式来创建和访问。 创建数组 JavaScript中的数组可以通过以下两种方式来创建: 直接使用方括号[]来创建一个空数组,如下所示: const arr1 = []; 使用方括号[]并在其中包含数组元素,如下所示: const ar…

    JavaScript 2023年5月27日
    00
  • 优化javascript的执行效率一些方法总结

    优化Javascript的执行效率一些方法总结 Javascript在前端开发中扮演着重要的角色,但是在开发过程中,经常会遇到Javascript代码执行效率较差的情况。以下是优化Javascript执行效率的一些方法总结。 1. 减少DOM操作 DOM操作是非常消耗性能的,每次变更都会让浏览器重新计算一次布局和绘制,因此尽量少的执行DOM操作可以提升代码的…

    JavaScript 2023年6月10日
    00
  • JS 实现微信扫一扫功能

    JS 实现微信扫一扫功能是非常有趣和实用的,下面我将为大家分享一下实现的完整攻略: 1. 获取微信官方 API 首先,为了实现扫一扫功能,我们需要先去微信开放平台(https://open.weixin.qq.com/)注册一个开发者账号,并申请获取微信官方 API。 当我们注册成功后,登录微信开放平台并创建一个新的微信公众号或小程序。在创建完成后,我们可以…

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