在前端开发中，正则表达式是一项非常重要的技术，可以用于字符串的匹配、替换、切割等操作。在处理表单输入时，有时需要对输入进行正则校验，这时候就可以使用 npm 包 regexp-input。
regexp-input 是什么？
regexp-input 是一个基于 regular-expression-to-ast 的表单输入控件，用于检查用户输入是否合法。regexp-input 的设计优点是可以通过一些简单的配置即可支持非常复杂的校验规则。
安装
使用 npm 命令来安装，命令如下：
npm install regexp-input
使用
基本用法
在 html 文件中添加一个 input 元素，并添加 data-rule 属性指定校验规则，例如匹配正整数：
<input id="age" type="text" data-rule="[1-9][0-9]*" placeholder="请输入您的年龄" />
在 javascript 文件中，使用以下代码来获取校验结果：
const regexpInput = require('regexp-input')
const ageInput = document.querySelector('#age')
const isValid = regexpInput.validate(ageInput)复杂用法
使用 regexp-input 还可以支持更复杂的校验规则，例如同时匹配多个规则、自定义校验函数等。
同时匹配多个规则
如果要同时匹配多个规则，可以使用管道符（|）来隔开规则：
<input id="email" type="text" data-rule="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+|[0-9]{11}" placeholder="请输入您的邮箱或手机号" />自定义校验函数
如果要校验的规则比较复杂，可以使用自定义校验函数来进行校验：
-- -------------------- ---- -------
------ ------------- --------------- -------------------- ------------------- --
--------
----- ------------- - -----------------------------------
----- --------------- - ------- -- -
-- ------------------------------
------ ------------------- -- ------------------- -- -------------------
-
------------------------------------ ----------------
----- ------- - -----------------------------------
---------示例代码
下面是一个完整的示例代码，演示了如何使用 regexp-input 进行校验：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------------- ------------
------- ----------------------------------------------------------------------------------
-------
------
------
-----
------ ---------------------------
------ ------------- ----------- ------------------------------- ------------------------- --
------
-----
------ ------------------------
------- ----------- ---------------------
------- ---------------------
------- --------------------
------- --------------------
---------
------
-----
------ ---------------------
------ -------- ----------- ----------------------- --------------------- --
------
-----
------ ---------------------------
------ ---------- ----------- -------------------------------------------------------------------- ------------------------- --
------
-----
------ --------------------------
------ ------------- --------------- -------------------- ------------------- --
------
-----
------ ------------- ---------- --
------
-------
--------
----- ------------- - -----------------------------------
----- ----------- - ---------------------------------
----- -------- - ------------------------------
----- ---------- - --------------------------------
----- ------------- - -----------------------------------
----- --------------- - ------- -- -
-- ------------------------------
------ ------------------- -- ------------------- -- -------------------
-
------------------------------------ ----------------
----- ------------ - ------- -- -
-----------------------
----- --------------- - -----------------------------------
----- ------------- - ---------------------------------
----- ---------- - ------------------------------
----- ------------ - --------------------------------
----- --------------- - -----------------------------------
-- ------------------ -
-----------------
-
-- ---------------- -
----------------
-
-- ------------- -
----------------
-
-- --------------- -
--------------------
-
-- ------------------ -
----------------
-
-
----- ---- - ------------------------------
------------------------------- -------------
---------
-------
-------结论
使用 npm 包 regexp-input 能够简化前端表单校验的编写流程，减少代码冗余，大大提高前端开发效率。同时，regexp-input 还支持复杂规则和自定义校验函数，能满足更多的校验需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8dc0