介绍
@vlr/validity 是一个可用于前端验证表单的 npm 包。该包提供了一些内置的验证规则，并可以自定义验证规则。
在本文中，我们将了解如何安装 @vlr/validity 包，如何使用它来验证表单以及如何自定义验证规则。
安装
要安装 @vlr/validity 包，您需要在终端中输入以下命令：
--- ------- ------------- ------
验证表单
在我们开始验证表单之前，我们需要先导入 @vlr/validity 。以下是导入的代码：
------ - ----------- ------------- ------ ---- - ---- ----------------
接下来，我们需要定义一些验证规则。以下是一些内置的验证规则：
- required: 字段必填。
- min: 用于数字或字符串，指定最小值，例如：min: 18。
- max: 用于数字或字符串，指定最大值，例如：max: 100。
- length: 用于字符串或数组，指定长度，例如：length: 10。
- pattern: 用于正则表达式，例如：pattern: /^[a-zA-Z0-9_-]+$/。
您可以根据需要使用这些规则，并根据需要自定义规则。以下是自定义规则的示例：
------------------ ------- -- - ------ ----- - - --- -- ---
现在，我们可以编写一些 HTML 表单代码，并使用它来验证表单。以下是一个简单的示例：
----- ------------
------ ----------- -----------------
------ ------------------------
------ --------- ----------- ----------- --
------------- ---------- --
--------
------ ---------- -------------------------------
------ ----------------------
------ -------- ---------- ----------- --
------------- --------- --
--------
------ --------------- ------------------------------------
------ --------------------------------
------ ------------- --------------- ----------- --
------------- -------------- --
--------
------- -----------------------------
-------在这个例子中，我们定义了三个字段：name、age 和 postcode。每个字段都有一些验证规则。
接下来，我们需要给表单注册一个提交事件，以便在提交表单时进行验证。以下是您需要做的：
----- ------ - --- ----------------
------------------- ------- -- -
-----------------------
-- ------------------- -
-- -------------
-
---在这个例子中，我们实例化了一个表单对象，并注册了一个提交事件。在提交事件中，我们首先调用 event.preventDefault() 停止表单的默认行为。接下来，我们调用 myForm.validate() 来验证表单。如果表单验证通过，我们可以提交表单。
自定义规则
如果您需要自定义验证规则，可以使用 defineRule() 方法。以下是定义一个自定义规则的示例：
------------------ ------- -- - ------ ----- - - --- -- ---
现在，我们可以在 HTML 表单中使用这个规则。以下是一个例子：
------ ------------- ---------------------- ------ ---------------------------- ------ ----------- ------------- ----------- -- ------------- ------------ -- --------
在这个例子中，我们定义了一个名为 even 的验证规则，并在 HTML 表单字段中使用它。
结论
@vlr/validity 是一个功能强大且易于使用的 npm 包，可用于前端表单验证。在本文中，我们了解了如何安装 @vlr/validity 包，如何使用它来验证表单以及如何自定义验证规则。希望这篇文章能对您有所帮助，让您更容易地实现前端表单验证。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/160940