npm 包 can-validate-legacy 使用教程

在现代 web 应用程序开发中，对表单验证的需求越来越多，而前端开发人员不想从头开始编写和维护表单验证的逻辑，因此出现了许多验证库。可以使用 npm 包管理器安装这些库，可以选择使用其中的任何一个库进行表单验证。

在本文中，我们将介绍一个叫做 can-validate-legacy 的 npm 包，它是一个快速、简单、可定制的表单验证库。在介绍该库的使用方法之前，我们需要先了解一些重要的概念和术语。

什么是验证？

验证是检查表单内容是否符合预期的过程。表单验证将输入数据与规则进行比较，并根据验证结果确定何时可以提交表单。表单验证可以用于确保表单数据的完整性、准确性和合法性。

为什么需要表单验证库？

表单验证库提供了解决表单验证问题的方法。使用表单验证库可以节省时间、降低复杂度和减少出错概率。使用验证库可以轻松地配置和验证表单，减少重复和维护工作。

can-validate-legacy 库的特性

can-validate-legacy 库由 canjs 团队开发，可以做以下这些事情：

  • 支持多个验证器，并能够组合在一起使用。
  • 支持异步验证方法。
  • 允许使用自定义验证器。
  • 可以通过选择器指定要验证的表单元素。
  • 支持错误消息的自定义处理。

安装 can-validate-legacy

可以通过以下两种方式安装 can-validate-legacy：

  • 使用 npm 安装：npm install can-validate-legacy
  • 使用 yarn 安装：yarn add can-validate-legacy

基础使用

在使用 can-validate-legacy 库之前，需要在 HTML 中包含它的基本结构。

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

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

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

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

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

在该示例中，首先创建一个新的 can.Control 对象，然后使用 validate 方法对表单进行验证。调用 validate 方法时，需要传递以下参数：

  1. 表单对象
  2. 规则对象
  3. 错误消息对象
  4. 可选配置选项

可以看到，该示例的规则对象定义了用户名和密码输入框都是必填项。

规则对象

规则对象是一个键值对集合，其中键表示要验证的表单元素，值是一个验证器类型的字符串或者是一个包含验证规则的数组。

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

验证器类型

can-validate-legacy 包含以下的基本验证器类型：

类型 描述
required 必填项，判断输入框是否为空
integer 整数类型，判断输入框值是否为整数
positive 正数类型，判断输入框内容是否为正数
negative 负数类型，判断输入框内容是否为负数
float 浮点数类型，判断输入框内容是否为浮点数
email 接受一个 email 格式的字符串
url 接受一个 URL 格式的字符串
date 接受一个日期字符串，这个字符串不需要在严格按照正则表示
time 接受一个时间字符串，这个字符串不需要在严格按照正则表示
datetime 接受一个日期时间字符串，这个字符串不需要在严格按照正则表示
creditcard 接受一个信用卡号码字符串
equals 是否等于某个字段的值
remote 通过 ajax 请求远程验证输入框内容
password 必须包含大写字母、小写字母、数字和特殊字符，且长度不小于 8 位
strongpassword 至少包含以下四个要素中的三个：大写字母、小写字母、数字和特殊字符，且长度不小于 8 位

自定义规则

除了使用内置的验证器以外，也可以自定义规则。定义一个验证规则，需要定义以下两个方法：

  1. test(): 该方法接收被验证的值作为参数，并返回一个 Boolean 值。一般情况下需要在此方法中定义针对被验证值的验证检查。
  2. message(): 在 test 返回 false 的情况下，该方法返回一个字符串，它是用于显示的文本消息。
------------------ -
    ----- --------------
        ------ --- --- ----------
    -- -------- ------ ---- ----- -----------
--

验证

上述规则定义完成后，就可以对该表单进行验证了。我们使用以下几种方法扩展 can.Control.Validation 来使用 can-validate-legacy 包：

  • validate 方法：该方法应该绑定在控制器的 init 方法中，用于定义规则、错误消息和配置选项并对表单进行验证:
--------- -------------- ------ --------- -------- -
     --- ----- - --------
         --------- - -----
         ---------- - -----------------------------------

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

     --------------------------
         --------------------
         -- ------------------------------- ----------- -------- -- --- --------- -
             -----------------------
         - ---- ----------------------- -
             --------------------------
                 ----------- ----
             ---
             --- ------- - ---------------------------
             -----------------------------------
             ----------------------------------
             ----------------------------------
             --------------------------
                 ----------- -----
             ---
         - ---- -
             ----------------------------------
         -
     ---
 --
  • showErrors 方法：该方法应该在表单的下一级中创建错误消息元素。使用 setAttribute 方法来配置挂载验证消息的 data-validate 属性：
----------- ---------------- -
     --- --------- - -----
         --------- - --------------------------- ------------ ----------------- ---- ----
             ---------------------- -
                 ------- ---------
                 -------- --------
                 --------------- --------
                 ------------- -------
             ---------------------- -
                 ---------------------- ---
                 -------- ---
                 -------------- -------
                 ------- ---------
             -----

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

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

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

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

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

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

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

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

     ---

     -- -- --------- -- - -- --------- --- ---- --
     ------------------------------ - -- -
         ------------------------------------
     - ---- -
         -----------------
     -
 -
  • clean 方法：该方法应该在表单验证成功后重置表单样式和错误消息：
------ ---------- -
     --- ---- - --------------

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

     -----------------------------------------
 --
  • validateForm 方法：该方法包含验证过程的核心逻辑，该方法应该传递被验证的表单 DOM 元素、功能验证器（由 functionValidator 创建）、错误消息和可选配置项：
------------- -------------- ----------- --------- -------- -
     --- --------- - -----
         ------ - ---

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

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

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

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

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

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

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

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

可以看到，在表单提交时，使用 validate 方法对表单进行验证，使用 showErrors 方法来显示错误消息，并使用 clean 方法重置表单样式和错误消息。

延迟验证

can-validate-legacy 封装了 setTimeout 以异步验证输入框内容。该特性很有用，可以使用 delay 选项来配置验证之前的延迟时间（毫秒）：

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

远程验证

can-validate-legacy 允许使用远程验证器。在规则对象中配置 remote 即可，例如：

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

在这个示例中，我们定义一个远程验证器，用于检查是否存在重复的用户名。通过将 remote 配置设置为一个包含 url、type、data 和 dataType 的对象，就可以通过 AJAX 请求远程验证器。

总结

can-validate-legacy 是一个支持自定义验证器、使用选择器指定要验证的元素和异步验证器特性的表单验证库。在本文中，我们提供了使用该库的详细教程。它可以帮助开发人员快速地添加表单验证功能，减少了重复和维护工作。希望这篇文章对感兴趣的读者有所帮助。

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

阅读全文

猜你喜欢

  • HTML的标签

    HTML标签详解 HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。在HTML中，有许多不同类型的标签可以用来定义网页的结构和内容。

    4 年前
  • npm包 exif-parser 使用教程

    简介 在前端开发中，我们经常遇到需要读取照片中的一些信息，比如拍照时间、曝光时间、ISO等等。而这些信息通常都被嵌入在照片中的 exif 数据中。exif-parser 就是一个可以帮助我们解析 ex...

    4 年前
  • npm 包 @types/terser 使用教程

    前言 前端开发中，我们经常需要压缩 JavaScript 代码以提高页面的加载速度，而 Terser 是一个高效的 JavaScript 压缩工具，可以帮助我们完成这个任务。

    4 年前
  • npm 包 @percy/agent 使用教程

    简介 @percy/agent 是一个用于测试和集成的 JavaScript 应用程序的开源软件包，可轻松捕获页面渲染，并在屏幕截图中进行比较。@percy/agent 依靠 Percy 服务，为用户...

    4 年前
  • npm 包 freelist 使用教程

    介绍 npm 包 freelist 是一个用于高性能内存管理的开源库，它可以优化内存的使用，从而提高应用的性能。使用 freelist 可以有效地减少应用的内存峰值和内存碎片。

    4 年前
  • npm 包 eslint-config-kswedberg 使用教程

    在前端开发中，我们经常需要使用静态代码检查工具来规范我们的代码，并保证代码的质量和一致性。而其中较为流行的一种工具就是 eslint，它可以在编辑器中实时检查代码，并给出相应的错误和警告信息。

    4 年前
  • npm 包 abstract-chunk-store 使用教程

    在前端开发中，处理大量数据是一件很常见的事情。abstract-chunk-store 是一个 npm 包，它允许我们将大数据切片，并以一种统一的方式进行存储和处理。

    4 年前
  • npm 包 cln 使用教程

    什么是 cln？ cln 是一个使用 JavaScript 编写的高精度计算库，可以进行任意精度的整数和有理数计算。它是一个 npm 包，可以被前端和后端项目使用。

    4 年前
  • npm 包 escaper 使用教程

    介绍 escaper 是一款用于处理 HTML、CSS 和 JavaScript 转义的 npm 包。在前端开发中，经常需要将一些特殊字符进行转义，防止出现安全问题或者显示错乱等情况。

    4 年前
  • npm 包 piece-length 使用教程

    在前端开发中，我们经常需要进行数据分片处理。npm 包 piece-length 就是一个很好的选择。它可以用来将一个大数据分成指定大小的小数据块，并且可以对每个块进行加密、签名等处理。

    4 年前
  • npm包filestream使用教程

    在前端开发中，处理文件是很常见的任务。filestream是一个npm包，可以帮助我们简洁、高效地处理文件。本文将详细介绍如何使用filestream这个npm包，希望可以为前端工程师提供帮助。

    4 年前
  • npm 包 tiny-json-http 使用教程

    在前端开发中，经常会需要向后端请求数据接口，而此时使用的工具就是 http 请求。但是，由于 http 请求的使用较为繁琐，因此出现了许多 http 请求的封装库，其中，tiny-json-http ...

    4 年前
  • npm 包 cache-chunk-store 使用教程

    概述 在前端项目开发过程中，经常需要从服务器上获取分块数据。这些数据可能非常大，因此传输和存储的效率对应用性能非常关键。cache-chunk-store 是一个 npm 包，它通过使用一个类似缓存的...

    4 年前
  • npm 包 @esfx/disposable 使用教程

    随着前端开发的发展，我们越来越需要使用像 node.js 这样的工具来处理我们的项目。Node.js 包管理器（npm）是一个伟大的工具，它提供了一个庞大的生态系统，让我们能够使用各种模块来实现我们的...

    4 年前
  • 使用 @esfx/cancelable 包

    @esfx/cancelable 是一个被广泛使用的npm包，用于在JavaScript中实现cancellation 和 abortability 的功能。它可用于取消promise, setTim...

    4 年前
  • npm 包 grunt-gulp 使用教程

    什么是 grunt 和 gulp？ 在介绍如何使用 npm 包 grunt-gulp 前，让我们先了解一下 grunt 和 gulp。 grunt 和 gulp 都是前端自动化构建工具，它们可以帮助我...

    4 年前
  • npm 包 @types/tinycolor2 使用教程

    今天我们将会学习如何使用 npm 包 @types/tinycolor2 来管理我们前端项目中的颜色值。这个 npm 包提供了一个强大的颜色处理类，可以用于处理混合色、颜色值计算、格式化等等操作。

    4 年前
  • 前端开发指南：npm 包 @pixi/canvas-renderer 使用教程

    介绍 在前端开发过程中，我们会经常使用到各种第三方库或者 npm 包来提高自己的开发效率。其中一个非常实用的 npm 包就是 @pixi/canvas-renderer。

    4 年前
  • npm 包 jqlite 使用教程

    jqlite 是一个精简版的 jQuery，它实现了 jQuery 的一部分功能，代码量更为精简，适用于在项目中，只需要使用 jQuery 的部分功能的情况。本文将介绍 jqlite 的使用方法，希望...

    4 年前
  • npm 包 rc-field-form 使用教程

    引言 在前端开发中，我们经常需要处理表单的输入输出，表单的校验以及表单数据的提交等一系列操作。而在 React 中，我们可以通过使用 npm 包 rc-field-form 来方便地进行表单处理。

    4 年前

相关推荐

    暂无文章