前言
随着前端技术的发展，我们的工作环境和工作方式也在不断地改变。如今，我们能够使用越来越多的现代工具来帮助我们更加高效地完成前端开发的工作。
这篇文章将会介绍一个非常优秀的 npm 包，它的名字是 '@richnologies/forms'。这个 npm 包可以帮助我们更加轻松地创建表单。
安装
安装的时候，直接在终端命令行中输入下面这个命令：
npm install @richnologies/forms
安装完毕后，你就可以在你的项目中开始使用 @richnologies/forms 了！
如何使用
导入
在使用这个 npm 包之前，我们需要先导入它。可以使用如下代码完成导入：
import * as forms from '@richnologies/forms';
尝试一个简单的示例
我们可以使用如下的代码和简单的 HTML 文件来测试这个 npm 包：
HTML:
<input type="text" id="name-input">
JS:
const nameInput = document.getElementById('name-input'); const nameInputValidated = forms.stringRequired({name: 'Name'}, {input: nameInput}); console.log(nameInputValidated);
这个例子中，我们用了一个普通的 <input> 元素，并对它应用了 @richnologies/forms 包中的 stringRequired() 函数。
stringRequired() 函数需要两个参数：第一个参数必须是一个对象，并包含 name 属性，表示这个表单元素的名称。第二个参数必须是包含一个 input 属性的对象，input 属性指向了我们要验证的表单元素。
如果验证成功，stringRequired() 函数将会返回一个 null。如果验证失败，它将会返回一个错误信息字符串。
在本例中，我们使用 console.log() 函数来输出验证的结果。当我们在这个 <input> 元素中输入任意文本时，我们将会看到 null 被输出在控制台上。
自定义验证函数
在实际开发中，通常有一些我们需要自行实现的验证函数。比如说，一个 email 的格式验证函数。@richnologies/forms 也支持自定义验证函数。
下面就是如何使用 @richnologies/forms 的自定义验证函数的示例：
-- -------------------- ---- ------- ----- ---------- - --------------------------------------- ----- ------------------- - ----------------------- ----- -------- ------ -------- ----- ------- -- - ------ ----------- ---------- ------- -- ---------------------------------------- --- ---------------------------------展开代码
这里，我们定义了一个新的验证函数 customValidator()，并将这个函数用在了我们自定义的 email 验证器上。
customValidator() 函数需要两个必须的参数：第一个是一个对象，用于提供错误信息和表单元素的名称。第二个参数是一个对象，其中包含了我们需要验证的表单元素以及我们自定义的验证器函数。
在这个示例中，我们定义了一个自定义的验证器函数，它的代码逻辑就是判断一个输入的字符串是否符合 email 格式的规范。返回值是一个布尔值，true 表示验证成功，false 表示验证失败。
如果验证成功，customValidator() 函数将会返回一个 null。如果验证失败，则返回的将是我们在第一个参数中指定的错误信息字符串。
使用 validators 对象
如果有多个表单验证器需要使用，我们可以通过一个包含所有验证器的 validators 对象来简化这个过程。
以下是一个使用 validators 对象的示例：
-- -------------------- ---- ------- ----- ---------- - - ------ ------- -- ----------------------------------------- ---- ------- -- ------------------------------------ -- ----- ---------- - --------------------------------------- ----- -------- - ------------------------------------- ----- ------------------- - ---------------------- ------ -------- ------ -------- ----- --------- ------- ----------- ---------- ----------------- -- --------------------------------- ----- ----------------- - ---------------------- ------ ---- ------ ------ -------- --- ---- --------- ------- --------- ---------- --------------- -- -------------------------------展开代码
这个例子就是展示如何使用一个包含多个验证器的 validators 对象。需要注意的是，这里的验证器函数必须满足接受一个参数并返回一个布尔值的规范。
在这个示例中，我们首先定义了一个包含两个不同的验证器函数的 validators 对象：一个用来验证 email 地址，另外一个用来验证邮政编码。
然后，我们将这两个表单验证器应用在了两个不同的输入框中。最后，我们输出了这两个输入框的验证结果。
结论
@richnologies/forms 包提供了非常便捷和强大的表单验证工具，它可以让我们更加轻松地创建表单并应用表单验证规则。
在实际开发中，我们经常需要对表单进行验证，以确保用户的输入能够符合要求。@richnologies/forms 包就是一个让我们解决这个问题的非常好的选择。希望这篇文章能够帮助你更好地了解这个工具，并在你的项目中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d6e81e8991b448db316
