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