npm 包 form-validity-state 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前端开发当中，表单验证是一个必不可少的功能，用户输入的数据往往需要进行格式、内容等方面的检查，以保证数据的合法性和准确性，从而提升用户体验。而 npm 包 form-validity-state 正是一款能够帮助前端开发者实现表单验证的工具。

简介

form-validity-state 是一个用于表单验证的 npm 包，其主要功能包括：

  • 表单验证状态的维护：对表单中的输入框进行验证，记录验证结果；
  • 验证错误的提示：对验证失败的表单项进行错误信息的提示；
  • 回调函数的触发：当表单验证通过或者未通过时，form-validity-state 将触发相应的回调函数。

安装

要使用 form-validity-state，需要在项目中安装该 npm 包：

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

引入

安装成功后，需要使用 import 或 require 引入该模块，然后使用该模块中提供的方法进行表单验证。

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

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

使用方法

初始化

在表单验证前，需要对 form-validity-state 进行初始化。初始化方法如下所示：

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

其中，formElement 参数表示表单元素 - 即包含表单板块的 form 元素，需要使用 document.querySelector 或类似方法获取。

表单初始化后，formState 中包含了当前表单元素的验证状态，以及对应的种类和错误信息。

对于表单初始化后的状态，可以使用以下方法获取：

获取表单状态

getFormState() 方法用于获取 form 验证状态：

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

返回值为 form 的验证状态，格式如下：

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

在 formState 中，$form 表示 form 表单标签的验证状态，包含 valid 和 invalid 两个属性，分别对应验证成功和验证失败。 $inputs 表示表单中各项输入框的状态信息。

在 $inputs 中，每个元素信息包含了输入框的验证状态、校验规则和错误信息，以及对应的 input 元素和信息提示元素。

添加校验规则

为了完成校验，需要配置相应的校验规则。可以使用 addRule(inputName, rule) 方法来给表单项添加校验规则。

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

其中，第一个参数 inputName 为表单项的名称，第二个参数规定了需要执行的校验方法和错误提示信息。

$inputs 中的元素信息会更新，添加了该 inputName 对应的校验规则:

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

触发校验

在上述的过程中，已经为表单项添加了校验规则，但在表单提交之前需要触发表单校验。

使用 validate(callback) 函数可以触发校验，验证结果将会被回调函数所接收。

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

错误提示

当一个表单项校验不通过时，需要对这个表单项进行错误提示，这将来自于校验规则中的 message。 form-validity-state 库会自动在该表单之后添加一个错误提示。

如果想要对错误提示进行自定义修改和样式展示，可以通过类选择器进行修改。

示例代码

下面是一个简单的实例代码，用于演示如何使用 form-validity-state 进行表单验证：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在代码运行之后，我们可以得到一个典型的表单页面。如果没有输入任何数据，或者输入的数据不符合校验规则，会出现如下的提示信息。

通过使用 form-validity-state，可以为前端开发者提供便捷的表单验证方法，进而提升用户体验。

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

阅读全文

猜你喜欢

  • npm 包 git-delete-squashed 使用教程

    在开发过程中，我们经常需要合并分支，并删除已经合并的无用分支。然而，有时候我们会遇到一种情况，即已合并分支的提交记录和目标分支重叠，无法直接删除。这时候，我们需要使用 git-delete-squas...

    2 年前
  • npm 包 email-public 使用教程

    在现代化的 web 应用程序中，电子邮件通知已成为不可或缺的一部分。然而，我们通常不希望在邮件中包含一些敏感信息，如个人信息、密码等。为此，email-public 这个 npm 包就应运而生了。

    2 年前
  • npm 包 lite-pathfindings 使用教程

    前言 在前端开发中，路径查找是一个常见的需求，比如寻找两个点之间的最短路径。那么，如何在前端实现这个功能呢？今天我们来介绍一个实现路径查找的 npm 包 —— lite-pathfindings。

    2 年前
  • npm 包 cordova-plugin-background-mode-alex 使用教程

    随着移动开发的普及，要求应用程序在后台运行的需求也越来越多。即使用户将应用程序关闭，我们也需要在后台运行使某些操作继续进行，例如：播放音乐、上传下载等。 cordova-plugin-backgrou...

    2 年前
  • npm 包 ghost-bot 使用教程

    在前端开发中，我们经常需要为网站或应用程序添加聊天机器人，以便更好地与用户交互。而 npm 包 ghost-bot 就可以帮助我们快速搭建一个聊天机器人，本文将详细介绍如何使用该包。

    2 年前
  • npm 包 express-mysql-connection 使用教程

    Express-mysql-connection 是一个让 Node.js 开发者通过 MySQL 数据库快速创建REST API的npm包。它是基于Express 4和mysql2创建的，支持数据库...

    2 年前
  • npm 包 vue2-tree 使用教程

    在前端开发中，我们常常需要使用树形结构来展示数据，而 vue2-tree 正是一个非常方便的 npm 包，可以帮助我们快速地实现树形结构的展示与操作。在本篇文章中，我们将详细介绍 vue2-tree ...

    2 年前
  • npm 包 @kingstinct/react-decoration 使用教程

    在前端开发中，我们常常需要对页面元素进行装饰和修饰。@kingstinct/react-decoration 是一个让我们更方便的实现这个功能的 npm 包。本篇文章将详细介绍这个 npm 包的使用方...

    2 年前
  • NPM 包 PConline 使用教程

    概述 PConline 是一个基于 Node.js 的开源工具，用于获取中国大陆省份、城市、区域 ID 数据。开发者可以通过拥有这些数据，快速定位用户位置信息，进行相关开发。

    2 年前
  • npm 包 easing-animation 使用教程

    什么是 easing-animation？ Easing-Animation 是一个小巧的 JavaScript 库，为动画应用 CSS 的 缓动函数（easing functions）。

    2 年前
  • npm 包 env-yaml 使用教程

    简介 在前端开发过程中，我们经常需要配置各种环境变量，例如 API 地址、数据库地址、邮件服务账号等等。配置文件的格式可以是 JSON、YAML 等等。而 env-yaml 就是一个封装了 YAML ...

    2 年前
  • npm 包 fmylife 使用教程

    随着 Web 前端技术的不断发展，前端工程师们的工作负担也越来越重。为了提高工作效率，我们需要不断探索新的工具和技术。本文将介绍一个前端开发中常用的工具——npm 包 fmylife 的使用教程。

    2 年前
  • npm 包 tbg-foundation-cli 使用教程

    简介 tbg-foundation-cli 是一个基于 Node.js 平台开发的命令行工具，它可以帮助前端开发者快速生成特定项目结构的基础代码，同时也集成了一些常用的工具和插件，方便日常开发工作。

    2 年前
  • npm 包 maven-cli 使用教程

    什么是 npm 包 maven-cli？ npm 包 maven-cli 是一个用于管理 Java 项目构建的命令行工具。它可以通过命令行操作来构建、测试、打包和发布 Java 应用程序。

    2 年前
  • npm 包 promise-redis-ejs 使用教程

    简介 在前端开发中，我们通常需要与后端进行数据交互。在这个过程中，与数据库的交互是必不可少的环节。而 Redis 是一款非常流行的内存数据库，它的出色性能使得它成为了很多应用的首选。

    2 年前
  • npm 包 csharp-compiler 使用教程

    一、简介 npm 包 csharp-compiler 是一款基于 C# 编译器的 JavaScript 包，可供前端开发者在浏览器端编译 C# 代码并输出执行结果。

    2 年前
  • npm 包 az-angular2-gallery 使用教程

    随着 Angular 的流行，为 Angular 开发的第三方库也越来越多。az-angular2-gallery 包就是其中之一。该库提供了一个可定制的图库，带有自动播放和缩放功能。

    2 年前
  • npm 包 string-url-extractor 使用教程

    在前端开发中，经常需要从字符串中抽取出 URL。这时候，一个好用的 npm 包 string-url-extractor 可以帮助我们快速地实现这个需求。本文将介绍如何使用这个包。

    2 年前
  • npm 包 @bauti093/conversor 使用教程

    前言 在前端开发中，我们常常需要进行数值的转换工作，例如货币单位的转换、温度单位的转换等。这时候一个好用的 npm 包能够为我们的开发带来很大的便利。 本文介绍的 @bauti093/converso...

    2 年前
  • npm 包 gocardless-api 使用教程

    引言 随着在线支付的普及，越来越多的公司和组织需要为客户提供方便快捷的在线支付服务。GoCardless 是一个适用于收取重复性付款的全球支付平台，它支持多种付款方式，包括直接借记、信用卡等。

    2 年前

相关推荐

    暂无文章