使用正则表达式进行表单验证是前端开发中必不可少的一项技能，但若每次都手动编写表单验证逻辑会显得繁琐并耗时。那么该怎么办？这就是本文要介绍的一个 npm 包 —— srvalidator，它可以帮助我们更方便地进行表单验证。
简介
srvalidator 是一个 lightweight 的表单验证工具，用于在可维护和可扩展的前端代码中进行表单验证。它是基于正则表达式的验证器，可以根据用户自定义的规则完成表单验证，并返回验证结果。
安装
安装 srvalidator 是非常简单的，只需要在终端输入以下命令就可以了：
--- ------- ----------- ------
使用
使用 srvalidator 简直就是如此的轻松和愉快！首先，我们需要通过一个对象传递需要验证的表单数据，然后我们再定义一些验证规则来对这些数据进行验证。最后，我们可以使用 .validate() 方法来获取验证结果。
下面是一个例子，我们将会验证一个包含姓名、邮件和电话这三个输入框的表单：
----- ---- - - ----- -------- ------ -------------------- ------ -------------- -- ----- ----- - - ----- ----------------- ------ ----------------- ------ ---------------- -- ----- ---------- - --- ----------------- ------- -- ----------------------- - ----------------------- - ---- - -------------------------------------- -
以上代码将会输出 “表单验证通过！”，说明所有输入框中的数据都通过了验证。但如果我们在表单数据中留空了某一个输入框，比如说邮箱，那么以上代码将输出：
- ------ - --------------- - -
这说明了我们的错误信息是被正确地输出了。
说明
基础的规则
srvalidator 包括了一些基础的验证规则，这些规则能够满足我们日常的验证需求。这里是目前可用的一些基础规则：
| 规则 | 描述 |
|---|---|
| required | 输入值必须有值。 |
| alpha | 输入值必须包含字母字符。 |
| numeric | 输入值必须为数字字符。 |
| alpha_numeric | 输入值必须为字母或数字字符。 |
| 输入值必须为有效的邮箱地址。 | |
| phone | 输入值必须为有效的电话号码。 |
定制规则
我们并不总是满足基础规则来进行表单验证的需求。当需要一些额外的规则时，srvalidator 提供了一种定制化规则的方式来满足这些要求。使用 addMethod() 方法就可以自定义验证规则：
----------------------------- --------------- - ------ ----- --- -------------- ---
以上代码定义了一个名为 code 的验证规则来验证表单中的一个输入框（比如验证码框），输入框的值必须为 SRVALIDATOR。现在，我们可以将这个规则加入到规则集合中：
----- ---- - - ----- ------------- -- ----- ----- - - ----- --------------- --
我们已经将输入框的值规定为了 SRVALIDATOR，那么，当我们进行表单验证时，代码将会输出 “表单验证通过！”：
----- ---------- - --- ----------------- ------- -- ----------------------- - ----------------------- - ---- - -------------------------------------- -
自定义错误信息
有时我们想要定义自己的错误信息，而不是使用默认的错误信息。我们可以使用 .setMessages() 方法来实现这一点：
------------------------- --------- ----------- ------ ------------- ----- ------------ ---
指定错误字段名
我们可以使用 .setAttributeNames() 方法为每个输入框指定一个名义上的名称，以便在输出错误信息时更容易理解：
--------------------------------------- ------- ------- --------
嵌套属性验证
有时候，我们需要验证一组嵌套属性。比如说我们有一个数据结构如下：
----- ---- - -
----- ------
-------- -
------ ------------------
------ --------------
-
--那么，我们可以使用以下的方式来验证嵌套属性（比如说我们需要验证邮件和电话）：
----- ----- - - ---------------- ----------------- ---------------- ---------------- --
操作完成后，我们就可以像先前一样使用 .validate() 方法来获取验证结果了。
总结
srvalidator 简化了前端开发中的表单验证工作，让我们能够更专注于代码的构建以及业务逻辑的实现。它很简单易用，并且提供了丰富的定制化需求。让我们一起来感受一下这个 npm 包吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005664381e8991b448e2528