原生js 实现表单验证功能

下面是关于“原生js实现表单验证功能”的完整攻略:

目录:

  • 需求分析和实现思路
  • HTML结构布局
  • JS代码实现
  • 示例说明

需求分析和实现思路

表单验证功能是Web开发中必不可少的功能之一,实现表单验证的方法有很多种,包括使用第三方库(如jQuery、Bootstrap等),也可以使用原生的JS来实现。下面是一个原生JS实现表单验证的基本思路:

  1. 获取表单元素。
  2. 监听表单提交事件。
  3. 在表单提交事件的监听函数中,根据表单元素的值执行相应的验证逻辑。
  4. 如果验证成功,则提交表单;否则,错误提示。

HTML结构布局

下面是一个简单的表单结构示例:

<form>
  <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>
    <button type="submit">登录</button>
  </div>
</form>

JS代码实现

下面是一个使用原生JS实现表单验证功能的代码示例:

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const username = form.elements.username.value
  const password = form.elements.password.value

  // 验证用户名和密码是否为空
  if (username.trim() === '') {
    showError('请输入用户名')
    return
  }
  if (password.trim() === '') {
    showError('请输入密码')
    return
  }

  // 验证通过,提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的代码实现中,我们首先获取了表单元素,并监听了表单提交事件。然后,在表单提交事件的监听函数中,我们通过form.elements获取了表单中的用户名和密码值,并进行了非空验证。如果表单验证通过,则调用form.submit()方法提交表单。如果验证不通过,则调用showError()方法来显示错误提示。

其中,showError()方法用于在表单中添加一个错误提示元素。该方法接收一个参数message,用于指定要显示的错误提示消息。

示例说明

下面提供两个示例,分别演示了如何使用原生JS实现表单验证:

示例一:实现邮箱和手机号验证

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const email = form.elements.email.value
  const phone = form.elements.phone.value

  // 验证邮箱和手机号是否填写正确
  const emailRegExp = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
  const phoneRegExp = /^1[3456789]\d{9}$/
  if (!emailRegExp.test(email)) {
    showError('请输入正确的邮箱')
    return
  }
  if (!phoneRegExp.test(phone)) {
    showError('请输入正确的手机号')
    return
  }

  // 验证通过,提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的示例中,我们扩展了表单验证功能,实现了邮箱和手机号的验证。在表单提交事件的监听函数中,我们首先获取了表单中的邮箱和手机号值。然后,我们使用正则表达式来验证邮箱和手机号是否填写正确。如果验证失败,则调用showError()方法显示错误提示信息。如果验证通过,则调用form.submit()方法提交表单。

示例二:实现密码复杂度验证

const form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault() // 阻止表单提交

  const password = form.elements.password.value

  // 验证密码是否符合要求
  const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
  if (!passwordRegExp.test(password)) {
    showError('密码必须包含大小写字母和数字,长度只能在8-16个字符之间')
    return
  }

  // 验证通过,提交表单
  form.submit()
})

function showError(message) {
  const div = document.createElement('div')
  div.className = 'error'
  div.textContent = message
  form.appendChild(div)
}

在上面的示例中,我们扩展了表单验证功能,实现了密码复杂度的验证。在表单提交事件的监听函数中,我们首先获取了表单中的密码值。然后,我们使用正则表达式来验证密码是否符合要求。如果验证失败,则调用showError()方法显示错误提示信息。如果验证通过,则调用form.submit()方法提交表单。

希望以上示例能够帮助你理解如何使用原生JS实现表单验证功能。

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

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

相关文章

  • 如何用RxJS实现Redux Form

    下面是如何用RxJS实现Redux Form的完整攻略。 简介 Redux Form 是用于 React 应用程序的可扩展表单组件和验证解决方案。而 RxJS 是一个用于处理异步操作的库,它的出现极大的简化了复杂异步操作的代码。 如何用 RxJS 实现 Redux Form 下面按照步骤来介绍如何用 RxJS 实现 Redux Form。 第一步:安装依赖 …

    JavaScript 2023年6月10日
    00
  • js获取ajax返回值代码

    接下来我将详细讲解JS获取AJAX返回值的完整攻略。 准备工作 在使用JS获取AJAX返回值之前,需要先引入jQuery库,因为AJAX主要是使用jQuery库的ajax方法来实现的。在头部引入jQuery库的代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/j…

    JavaScript 2023年6月11日
    00
  • SVG描边动画

    下面是关于“SVG描边动画”的完整攻略。 1. 什么是SVG描边动画? SVG描边动画指的是利用SVG的path路径元素来创建描边动画效果。通常,SVG的path路径元素可以表示成简单的连续线或复杂的曲线,而SVG描边动画则可以让这些线条按照一定的顺序绘制出来,从而创造出动画效果。 2. 如何实现SVG描边动画? 下面是一个基本的SVG描边动画示例: &lt…

    JavaScript 2023年6月11日
    00
  • javascript 异常处理使用总结

    JavaScript 异常处理使用总结 什么是 JavaScript 异常处理? JavaScript 异常处理是指,在 JavaScript 代码运行过程中发生错误时,能够通过编写特定的代码来处理这些错误,以保证代码的正常运行。 为什么需要 JavaScript 异常处理? 在 JavaScript 代码中,错误的出现是不可避免的。如果我们不处理这些错误,…

    JavaScript 2023年5月27日
    00
  • js闭包用法实例详解

    JS闭包用法实例详解 什么是闭包? 闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式是在一个函数内部创建另一个函数。在创建的内部函数中,可以访问外部函数的参数和变量,即使外部函数已经返回退出。 为什么要使用闭包? 闭包的主要作用是作为函数工厂,可以用来封装变量和方法,使全局变量不被污染。 同时,闭包可以让一个函数访问另一个函数的局部变量,使得…

    JavaScript 2023年5月28日
    00
  • JavaScript canvas绘制动态圆环进度条

    现在我来详细讲解如何通过 JavaScript canvas 绘制动态圆环进度条的完整攻略。 概述 原理:利用 <canvas> 标签绘制一个圆环,再通过控制圆环的起始弧度和结束弧度来实现进度条的动态效果。 需要掌握的知识: HTML5 <canvas> 标签的使用 ctx.beginPath()、ctx.closePath()、ct…

    JavaScript 2023年6月11日
    00
  • 原生JavaScript实现幻灯片效果

    下面我会详细讲解一下“原生JavaScript实现幻灯片效果”的完整攻略。 1. 确定需求 在开始编写代码之前,我们需要考虑一下实现幻灯片效果的具体需求,例如: 幻灯片的图片数量 幻灯片每张图片的宽高 幻灯片切换的方式 幻灯片的自动播放和手动控制 2. 示范HTML结构 接下来,我们先来示范一下实现幻灯片效果所需要的HTML结构。代码如下: <div …

    JavaScript 2023年6月10日
    00
  • JavaScript懒加载详解

    JavaScript懒加载是一种优化网站性能的技术,它可以在浏览器显示可见内容之后再延迟加载未显示内容,从而加快页面加载速度。下面将为你详细讲解JavaScript懒加载的完整攻略。 什么是JavaScript懒加载 JavaScript懒加载是指在页面加载时,将页面上的图片、视频、音频等资源暂时不加载,当用户滚动页面时再根据用户的可视范围加载相应的内容。这…

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