在前端开发中，我们常常需要对用户输入进行校验，以保证输入的数据格式正确。而使用正则表达式进行校验的过程有时会比较冗长且容易出错。因此，开发者们需要一个简单且易用的库来帮助完成这个任务。这时，我们就可以使用 npm 包 input-patterns 来进行用户输入校验。
什么是 npm 包 input-patterns？
npm 包 input-patterns 是一个用于校验用户输入的 JavaScript 库。该库支持多种类型的校验，如数字、邮箱、电话等常用格式的校验，并且可以针对特定场景进行自定义校验。该库的优点是使用简单，无需编写冗长的正则表达式即可完成校验。
安装和基本使用
在使用 input-patterns 之前，我们需要在本地安装该包。通过以下命令即可完成安装：
npm install input-patterns --save
安装完成后，我们只需要在我们的项目中引入该库即可使用。
import inputPatterns from 'input-patterns';
下面，我们来看一个基本的使用实例：
const name = 'Tom';
if (inputPatterns.isAlphabets(name)) {
console.log(`${name} 是纯字母组成的`);
} else {
console.log(`${name} 不是纯字母组成的`);
}运行以上代码，输出结果为：
Tom 是纯字母组成的
该示例中，我们使用了 inputPatterns 提供的 isAlphabets 方法来校验该字符串是否全部由字母组成。该方法的返回结果是布尔值，返回 true 表示该字符串全部由字母组成。
其他类似的常用方法还包括：isNumeric，isEmail，isPhoneNumber 等。
自定义校验规则
除了以上预定义的校验方法，input-patterns 还支持自定义校验规则。在使用 input-patterns 的时候，我们可以调用 inputPatterns.addRule 方法来添加自定义的规则。我们将一个名称和一个用于进行校验的正则表达式传入，即可创建我们自己的校验规则。
例如，我们可以创建一个校验城市名称是否由两个或以上单词组成的规则：
inputPatterns.addRule('twoWordsCity', /^[a-zA-Z]+ [a-zA-Z]+$/);然后，我们就可以像使用预定义的规则一样使用该规则了：
const city = 'San Francisco';
if (inputPatterns.test('twoWordsCity', city)) {
console.log(`${city} 是由两个或以上单词组成的城市名称`);
} else {
console.log(`${city} 不是由两个或以上单词组成的城市名称`);
}输出结果为：
San Francisco 是由两个或以上单词组成的城市名称
深度指导意义
作为一个前端开发者，我们需要在保证代码质量和开发效率的同时，尽可能地减少代码冗余和 bug。使用 input-patterns 来进行用户输入校验，可以大大减少我们编写冗长正则表达式的时间和减少代码的复杂度。因此，学习如何使用 input-patterns 是一个非常必要的技能。
示例代码
以下是一个完整的示例代码，用于校验一个假的注册表单是否合法。在该示例中，我们使用了 input-patterns 提供的预定义的校验方法，以及自定义的校验规则。
-- -------------------- ---- -------
------ ------------- ---- -----------------
-- -------
--------------------------------- ------------------------------------------------
-- ----
----- ----- - -
----- --------------------------
------ ----------------------
--------- -----------
---------------- ------- --------- -- ----- --- ------------------
--
-- ------
----- -------- - -
----- -------
------ -------------------
--------- ---------
---------------- ---------
--
--- ----------- - -----
--- ---- --- -- --------- -
----- ----- - --------------
----- ---- - -----------
-- ------- ---- --- ----------- -
-- -------------- -
----------- - ------
------------------- -------
-
- ---- -- ------- ---- --- --------- -
-- -------------------------- ------- -
----------- - ------
------------------- -------
-
- ---- -- ------- ---- --- --------- -
-- ------------------ ---------- -
----------- - ------
------------------- ------
-
-
-
-- ------------- -
----------------------
-输出结果为：
表单校验通过
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecb8a