在前端开发中，表单验证是一个非常重要的环节。要保证数据的有效性和一致性，开发者需要在客户端和服务端同时做好验证。在客户端，我们常常使用 JavaScript 来验证表单输入的数据，而为了避免重复造轮子，我们可以使用一些成熟的表单验证 npm 包来帮助我们完成这项工作。fusspot 就是其中比较优秀的一个。
fusspot 是什么
fusspot 是一个轻量级、易于扩展的 JavaScript 表单验证库。它支持链式语法，提供了丰富的验证规则，如最大长度、最小长度、邮箱格式、手机号格式、URL 格式等，还有自定义规则接口。
安装 fusspot
在使用 fusspot 之前，需要先安装它。你可以通过 npm 命令行工具在项目中安装：
npm install fusspot
接着你就可以在项目中使用 fusspot 了。
使用 fusspot
在使用 fusspot 时，需要用到一些基本概念：
- 规则（Rule）：用于指定验证规则的 JavaScript 对象，可以是 fusspot 预定义的一些规则，也可以是你自己定义的规则。
- 验证器（Validator）：用于对输入数据进行验证，由一个或多个规则组成。
- 数据（Value）：需要验证的数据，可以是字符串、数字、布尔值等。
下面是一个简单的示例，展示如何使用 fusspot 对输入的字符串进行验证：
-- -------------------- ---- ------- ------ ------- ---- ---------- ----- --------- - --------- ------------- ------------------------ ----- ------ - ------------------- ---------------------------- -- ---- ----- ------------- - ---------------- -------- ----------------------------------- -- ----- ------------------------------------ -- ----- ----- ---- -- -- ---- - ---------- ------- ---- ----- ---- --- ----- --- -------- ----------
在这个示例中，我们创建了一个名为 validator 的验证器，并且使用 fusspot 链式语法添加了两个规则，分别是最大长度不能超过 8 个字符和只允许输入英文字母。接着，我们调用 validator 函数并传入一个字符串参数，fusspot 就会使用我们定义的规则对字符串进行验证，最后返回一个验证结果的对象，其中 isValid 属性表示验证结果，如果是 true 就说明验证通过，否则就是 false，同时对象还提供了 messages 属性，包含了可能的错误消息。
除了使用 fusspot 自带的规则之外，我们还可以自定义规则。下面是一个自定义规则的示例：
const isFriday = (value) => {
const dayOfWeek = new Date(value).getDay();
return dayOfWeek === 5;
};
const validator = fusspot().addRule('isFriday', isFriday);
const result = validator('2019-11-15');
console.log(result.isValid); // true这个示例中，我们创建了一个自定义规则 isFriday，它接受一个参数 value，并且将其转换成日期类型，如果日期是星期五则返回 true，否则返回 false。接着我们使用 addRule 方法将自定义规则添加到验证器中，并且使用 validator 函数对字符串 '2019-11-15' 进行验证，最终返回了一个验证结果对象，isValid 属性的值是 true，说明输入的数据是符合自定义规则的。
结语
fusspot 在实现表单验证方面提供了很多有用的工具，既方便了开发者对表单进行验证，也提升了代码的可读性和可维护性。当然，除了 fusspot，还有很多其他的表单验证 npm 包，开发者们可以根据自己的需要来选择适合自己的验证库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552fe81e8991b448d0600