Vue.js 如何实现表单验证功能？

Vue.js 是一款流行的前端框架，它的双向数据绑定和组件化开发使得页面开发效率和代码可维护性得到了很大提高。然而，在表单验证方面，Vue.js 并没有提供官方支持。本文将介绍如何使用 Vue.js 实现表单验证功能，包括常用的验证规则和自定义验证规则。

表单验证规则

表单验证是前端开发中重要的一部分，它可以保证用户输入的数据符合要求，提高系统的安全性和稳定性。常用的表单验证规则如下：

  • 必填项验证：表单提交时某些输入框是必填项，不能为空。
  • 邮箱验证：只允许输入符合邮箱格式的文本。
  • 手机号码验证：只允许输入符合中国大陆手机号码格式的文本。
  • 数字验证：只允许输入数字字符。
  • 字符验证：只允许输入字符。
  • 密码验证：只允许输入符合一定复杂度的密码，如包含数字、字母、特殊字符等。
  • 相等验证：如确认密码输入框必须与密码输入框输入的文字相等。
  • 自定义验证：为表单添加自定义验证规则。

使用 Vue.js 实现表单验证

Vue.js 提供了组件化开发的方式，我们可以将表单封装成组件，为组件添加验证规则，再通过组件间的数据绑定实现表单验证。下面是一个简单的使用 Vue.js 实现表单验证的示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ----
        ------ ----------- ----------------------- --
      --------
      ---- ----------------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      --------- ---
      -------------- -----
    --
  --
  -------- -
    -------------- -
      -- ---------------- -
        ------------------ - ------
      - ---- -
        ------------------ - -----
        -- ----
      -
    --
  --
--
---------

在这个示例中，我们定义了一个 username 变量和一个 usernameValid 变量，它们通过 v-model 双向绑定实现页面与组件间数据的同步。当 username 变量发生变化时，会触发验证函数 handleValidateUsername，该函数通过改变 usernameValid 变量的值实现验证结果的呈现。

必填项验证

我们可以定义一个 required 规则，通过 v-if 判断是否输入了文本内容。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ----
        ------ ----------- ----------------------- --
      --------
      ---- --------------- -- ----------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      --------- ---
      -------------- -----
    --
  --
  -------- -
    -------------- -
      -- ---------------- -
        ------------------ - ------
      - ---- -
        ------------------ - -----
        -- ----
      -
    --
  --
--
---------

在这个示例中，我们只需要在 handleSubmit 函数中添加必填项验证的逻辑即可。如果 username 变量为空，则将 usernameValid 设置为 false，并提示用户输入用户名。

邮箱验证

邮箱验证可以通过正则表达式匹配来实现。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ---
        ------ ------------ -------------------- --
      --------
      ---- ----------------------------- -- -----------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------ ---
      ----------- -----------------------------------------------------
      ----------- -----
    --
  --
  -------- -
    -------------- -
      -- ----------------------------------- -
        --------------- - ------
      - ---- -
        --------------- - -----
        -- ----
      -
    --
  --
--
---------

在这个示例中，我们定义了一个 emailRegex 变量，它通过正则表达式实现邮箱地址格式的匹配。在 handleSubmit 函数中，我们需要根据验证规则检查 email 变量的值，并将 emailValid 变量的值设为 true 或 false。

手机号码验证

和邮箱验证类似，手机号码验证也可以通过正则表达式匹配来实现。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        -----
        ------ ---------- --------------------- --
      --------
      ---- ------------------------------- -- ------------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------- ---
      ------------ --------------------
      ------------ -----
    --
  --
  -------- -
    -------------- -
      -- ------------------------------------- -
        ---------------- - ------
      - ---- -
        ---------------- - -----
        -- ----
      -
    --
  --
--
---------

数字验证和字符验证

数字验证和字符验证可以通过正则表达式匹配来实现。下面是示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ----
        ------ ----------- ------------------ --
      --------
      ---- ------------------------- -- -----------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ---- ---
      --------- --------------
      --------- -----
    --
  --
  -------- -
    -------------- -
      -- ------------------------------- -
        ------------- - ------
      - ---- -
        ------------- - -----
        -- ----
      -
    --
  --
--
---------
----------
  -----
    ----- -------------------------------
      -------
        ---
        ------ ------------- -------------------- --
      --------
      ---- ---------------- -- -----------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ---- ----
      --------- -----
    --
  --
  -------- -
    -------------- -
      -- ----------------- -
        ------------- - ------
      - ---- -
        ------------- - -----
        -- ----
      -
    --
  --
--
---------

在数字验证中，我们可以通过 v-model.number 来将输入的文本转换为数值类型，并将 numValid 的值设为 false。

密码验证

密码验证需要定义一个复杂的正则表达式来匹配符合密码复杂度的文本。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ---
        ------ --------------- ----------------------- --
      --------
      ---- ----------------------------------- -- ----------------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      --------- ---
      -------------- -----------------------------------------------
      -------------- -----
    --
  --
  -------- -
    -------------- -
      -- ----------------------------------------- -
        ------------------ - ------
      - ---- -
        ------------------ - -----
        -- ----
      -
    --
  --
--
---------

在这个示例中，我们定义了一个 passwordRegex 变量，它通过正则表达式匹配必须由数字和字母组成、长度大于等于6位的密码。在 handleSubmit 函数中，我们需要根据验证规则检查 password 变量的值，并将 passwordValid 变量的值设为 true 或 false。

相等验证

相等验证需要比较两个输入框的值是否相等。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ---
        ------ --------------- ----------------------- --
      --------
      -------
        -----
        ------ --------------- ------------------------------ --
      --------
      ---- -------------- --- --------------- -- --------------------------------------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      --------- ---
      ---------------- ---
      --------------------- -----
    --
  --
  -------- -
    -------------- -
      -- -------------- --- --------------------- -
        ------------------------- - ------
      - ---- -
        ------------------------- - -----
        -- ----
      -
    --
  --
--
---------

在这个示例中，我们定义了两个变量 password 和 confirmPassword，在 handleSubmit 函数中比较这两个变量的值是否相等，并将 confirmPasswordValid 的值设为 true 或 false。

自定义验证

自定义验证可以通过定义一个验证函数来实现，这个函数可以在组件中任意地方被调用，如在 created 钩子、事件处理函数或计算属性中等。下面是一个示例代码：

----------
  -----
    ----- -------------------------------
      -------
        ---
        --------- ----------------------------------
      --------
      ---- ----------------------- --------------- --------
      ------- -------------------------
    -------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      -------- ---
      ------------- -----
      ---------------- ---
    --
  --
  -------- -
    -------------- -
      -- -------------------- -
        -------
      -
      -- ----
    --
    -------------- -
      -- --------------- -
        ----------------- - ------
        -------------------- - ---------
      - ---- -- -------------------- - ---- -
        ----------------- - ------
        -------------------- - ---------------
      - ---- -
        ----------------- - -----
        -------------------- - ---
      -
    --
  --
  --------- -
    --------------------
  --
  ------ -
    -------- -
      -------- ---------------
      ---------- ------
    --
  --
--
---------

在这个示例中，我们定义了一个 checkContent 方法来实现自定义验证，该方法可以在组件中任意地方被调用。在 created 钩子中和 watch 监听事件中都调用了 checkContent 方法，以实现验证的即时更新。

总结

通过上述示例，我们可以看到 Vue.js 实现表单验证的细节和步骤。表单验证是一个必要的环节，它不仅可以保证系统的安全性和稳定性，而且可以提高用户体验和页面交互。同时，我们在实现表单验证功能的过程中，也可以学会如何使用正则表达式来匹配文本，了解到自定义验证和传参的方式，加深了对 Vue 组件化开发的理解和应用。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646eb9b9968c7c53b0d0d728

阅读全文

猜你喜欢

  • Next.js 如何进行 CDN 加速？

    什么是 CDN？ CDN，全称为 Content Delivery Network，即内容分发网络。 通俗地讲，CDN 是一种分布式的服务器系统，可以提高互联网内容传输的速度和可用性，通过将内容存储在...

    1 年前
  • 如何在 ES7 中实现异步迭代器

    异步迭代器是在 ES2018 中引入的一项新特性，它可以让我们在异步数据流中使用 for/of 循环语法，进一步简化了异步编程的体验。 而在 ES7 中，则可以使用一些语法糖来实现异步迭代器，为我们的...

    1 年前
  • TypeScript 常见类型错误及解决方法

    前言 TypeScript 是 JavaScript 的一个超集，它添加了类型检查、接口、枚举等特性，使得编写大型 JavaScript 项目更加可靠和易于维护。然而，在编写 TypeScript 代...

    1 年前
  • 使用 Hapi 完成登录鉴权功能

    在现代 web 应用中，用户登录鉴权已经成为了必不可少的一部分。在前端开发中，我们常常需要通过调用后端接口来完成用户的登录和鉴权操作。本文将介绍如何使用 Hapi 框架来完成登录鉴权功能，以及如何在前...

    1 年前
  • 前端极客必修课：Koa2 项目实战全程解析

    前言 在前端领域，随着 Node.js 的出现，前端工程师们开始拥抱后端开发，掌握了更多的技能，也就有了更多的职业发展机会。而 Koa2，作为现在 Node.js 领域中最流行的框架之一，其简洁、灵活...

    1 年前
  • ES11 中的 globalThis：解决跨环境问题

    ES11 中的 globalThis：解决跨环境问题 在 Web 前端开发中，经常会遇到代码需要在多个环境中执行的情况，比如浏览器、Node.js 等。而不同的环境中全局对象是不同的，如 window...

    1 年前
  • 让无障碍体验成为你的网站优势

    让无障碍体验成为你的网站优势 随着互联网的不断发展，越来越多的用户需要通过辅助技术来改善他们使用网络的体验，以克服各种身体或认知障碍对他们上网产生的限制。所谓无障碍体验，就是指为这些用户提供可访问的网...

    1 年前
  • 萌新也能看懂的 ECMAScript 2021 特性总结

    ECMAScript 是 JavaScript 的标准化规范，每年都会更新一次。2021 年的 ECMAScript 2021 更新了一些新特性，这里我们将对这些特性进行简要总结，以便各位开发者了解和...

    1 年前
  • 使用 Docker Compose 部署 Vue.js 应用程序

    Docker 是一种容器化技术，可以轻松地在不同的环境中运行应用程序。Docker Compose 是 Docker 的一个工具，它可以用来描述和运行多个 Docker 容器的应用程序。

    1 年前
  • 后端使用 Server-Sent Events 实现前端面板通讯

    在前端开发中，经常需要与后端进行通讯，以获得实时数据或更新页面内容。而后端使用 Server-Sent Events（SSE）实现前端面板通讯是一种常用的方法，这种方法可以不使用 WebSocket ...

    1 年前
  • Angular 如何设置不同环境变量

    引言 在实际项目中，不同的环境可能需要不同的配置。例如，开发环境、测试环境和生产环境可能有不同的服务器地址、API 网关、端口号等等。修改这些配置需要频繁地更改代码或者在打包时手动指定，这样就容易出错...

    1 年前
  • ES8 中新增的 Object.getOwnPropertyDescriptors 方法及应用场景

    在前端开发过程中，我们常常需要操作对象的属性，例如获取属性的值、设置属性的值和删除属性等。ES8 中新增了一个 Object.getOwnPropertyDescriptors 方法，它可以返回一个对...

    1 年前
  • 如何使用 ES6/ES7 和 ES10 中的 Promise.allSettled()

    Promise.allSettled() 是 ES2020 （也称为 ES10）中的一个新 API，它是 Promise.all() 方法的一种变体。 Promise.allSettled() 方法接...

    1 年前
  • ES6 中 Set 和 Map 数据结构的使用教程

    在 ES6 中，引入了 Set 和 Map 数据结构，这两种数据结构的出现，为前端开发带来了很多方便和效率。实现了集合和字典这两种数据结构，这篇文章将详细介绍 Set 和 Map 的基本使用以及应用场...

    1 年前
  • SASS 中使用嵌套规则实现代码精简的技巧

    在前端开发中，样式表是不可或缺的重要组成部分。然而，随着项目的不断发展和扩大，样式表的代码量往往也随之增加。这时，我们就需要使用一些技巧来管理和简化样式表代码。其中一种有用的技巧就是利用 SASS 的...

    1 年前
  • Angular + RxJS：复杂的 UI 交互如何优雅处理

    前端开发中，我们经常需要处理复杂的 UI 交互，例如用户输入、动态数据加载、响应式布局等等。这些任务往往需要处理异步数据流，这时候使用 Angular 和 RxJS 的组合可以帮助我们优雅地处理这些情...

    1 年前
  • 如何通过 Mongoose 实现 MongoDB 的全文搜索功能

    MongoDB 是一种非关系型数据库，在前端开发中经常用来存储数据。而 Mongoose 是一个在 Node.js 环境中运行的 MongoDB 的对象文档映射工具，为开发者提供了更加友好的 API ...

    1 年前
  • async/await: await 后面的 Promise 出错的解决方法

    前言 Promise 是 ES6 引入的一个新的语言特性，解决了回调地狱的问题，但是他没有完全解决异步编程的问题，因为 Promise 仍然需要通过回调地狱来解决链式调用的问题。

    1 年前
  • LESS 中使用 clear 来清除浮动的技巧

    在前端开发中，浮动（float）是常用的布局技术。但是，浮动元素可能会导致父元素的高度计算错误，从而影响页面的布局。为了解决这个问题，我们通常会使用 clear 来清除浮动。

    1 年前
  • Flexbox 布局及其如何实现垂直和水平居中

    1. 背景 随着移动端和响应式设计的普及，布局的灵活性成为了前端开发中的重要问题。在过去，我们往往使用一些比较笨重的方案来实现布局，如float和position。

    1 年前

相关推荐

    暂无文章