在前端开发中经常需要进行复杂的表单校验，这时候我们就需要一个方便易用且功能强大的表单验证工具，而 @nodeos/node-ife 便是其中之一。本文将详细介绍如何使用该 npm 包进行表单验证。
安装
首先，我们需要在项目的工程中引入该 npm 包。可以通过以下命令进行安装：
npm i @nodeos/node-ife
安装完成后，我们就可以在代码中通过 require 或 import 进行引入：
const ife = require('@nodeos/node-ife'); // CommonJS
import ife from '@nodeos/node-ife'; // ES6使用
表单校验
接下来我们开始使用 ife 进行表单校验。下面是一个简单的表单：
<form id="my-form"> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">Submit</button> </form>
我们希望在用户提交表单时对其进行校验。可以通过以下代码实现：
-- -------------------- ---- -------
----- --------------- - -
- ----- ----------- ------ ------------ -------- --
- ----- ----------- ------ ------------ --------------------- -
--
----- ---- - -----------------------------------
------------------------------- - -- -
-------------------
----- -------- - --- ---------------
----- ---------------- - ---------------------- -----------------
-- -------------------------- -
-- ----
- ---- -
-------------------------------------
-- ---------
-
---以上代码定义了两个字段的校验规则。在用户提交表单时，我们通过 ife.validate() 方法对表单数据进行校验。返回的 validationResult 中包含是否验证通过的信息以及验证不通过的错误信息。
自定义错误消息
有时，我们针对不同的校验规则可能需要定制不同的错误信息。可以通过以下代码实现自定义错误消息：
-- -------------------- ---- -------
----- --------------- - -
- ----- ----------- ------ ------------ --------- --------- -
--------- ----------
------ ------------
---
- ----- ----------- ------ ------------ ---------------------- --------- -
--------- ---------
-------------- -------- - - -- ------
--
--定义 messages 属性可以为每个规则指定自定义的错误消息。
动态校验
有时，表单的校验规则可能需要根据用户输入动态变化。可以通过以下代码实现动态校验的功能：
-- -------------------- ---- -------
----- --------------- - -
- ----- ----------- ------ -- --
- ----- ----------- ------ -- -
--
----- ---- - -----------------------------------
----- ------------- - ----------------------------------------
----- ------------- - ----------------------------------------
-- ---------
--------------------------------------- -- -- -
-- --------------------------- - -- -
------------------------ - -------------
- ---- -
------------------------ - ------------ ---------
-
---
--------------------------------------- -- -- -
-- --------------------------- - -- -
------------------------ - -------------
- ---- -
------------------------ - ------------ ----------------------
-
---
-- ---------
------------------------------- - -- -
-------------------
----- -------- - --- ---------------
----- ---------------- - ---------------------- -----------------
-- -------------------------- -
-- ----
- ---- -
-------------------------------------
-- ---------
-
---以上代码对校验规则进行了动态更新，使得 username 和 password 的校验规则会随着用户输入的动态变化而变化。
自定义规则
除了内置的校验规则之外，@nodeos/node-ife 也支持自定义校验规则。可以通过 ife.addRule() 方法添加自定义的规则：
-- -------------------- ---- ------- -- ------- ---------------------- ------- ------- -- - ------ ----- --- ---------- --- -- ---------- ----- --------------- - - - ----- ----------- ------ ------------ --------------------------- -- - ----- ------------------- ------ ------------ - --
以上代码定义了一个自定义校验规则 equalTo，用于比较两个输入框中的值是否相等。在校验规则的使用中，可以通过冒号分隔符指定该校验规则需要比较值的输入框的名称。
示例代码
下面是一个完整的带有表单验证的 HTML 页面的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ----------
-------
------
----- -------------
------ ----------- --------------- -------------------- --
-----------
------ --------------- --------------- ------------------- --
-----------
------ --------------- ----------------------- --------------------- --
-----------
------- -----------------------------
-------
------- --------------------------------------------------------------------
--------
-- -------
--------------------------- ------- ------- -- -
------ ----- --- ------------------------------------------------------
---
----- --------------- - -
- ----- ----------- ------ ------------ --------- --------- -
--------- ----------
------ ------------
---
- ----- ----------- ------ ------------ ---------------------- --------- -
--------- ---------
-------------- -------- - - -- ------
---
- ----- ------------------- ------ ------------ -------------------- --------- -
-------- ------------
--
--
----- ---- - -----------------------------------
----- ------ - -------------------------------
-- ---------
------------------------------- - -- -
-------------------
----- -------- - --- ---------------
----- ---------------- - --------------------------- -----------------
-- -------------------------- -
----------------------- ---------
- ---- -
-- ------
-------------------- -- -
----- ----------- - ------------------------------------
-- ------------- -
----- ------------- - --------------------- -- -
------ --------------------------
------------
---------------------------------- - --------------
- ---- -
---------------------------------- - ---
-
---
-
---
-- ----------------------
-------------------- -- -
------------------------------ -- -- -
----- -------- - --- ---------------
----- ------------------- - --------------------- -- -------------------
----- ------------------- - ------------------------------ -- --------- --- ------------
--- --------------------- - ------------------------------------------------
-- --------
-- ------------------- --- - -- ------------------------------------------- -
--------------------- - --------------------------------- -- ---- --- ------------
- ---- -- ------------------- - - -- -------------------------------------------- -
------------------------------------------
-
---------------------------------------- - - ----- ----------- ------ --------------------- --
----- ---------------- - --------------------------- ---------------------
-- -------------------------- -
---------------------------------- - ---
- ---- -
----- ----------- - ------------------------------------
----- ------------- - --------------------- -- -
------ --------------------------
------------
---------------------------------- - --------------
-
---
---
---------
-------
-------在该示例中，我们对每个输入框的失去焦点事件进行了校验，并实时更新了校验规则。此外，我们也在表单提交时对其进行了校验，并在不合法时输出了相应的错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69e1