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 年前

相关推荐

    暂无文章