在web开发中，为避免用户输入无效或不合法的数据，我们需要使用表单输入控件添加正则表达式（RegExp）限制。虽然JavaScript内置了正则表达式的支持，但是写起来很麻烦，需要了解正则表达式的语法和用法，而且多次重复时也容易出错。为此，基于JavaScript的masks.js库应运而生，提供了更加方便、易用和高效的方式帮助开发者实现此功能。
本文将介绍通过npm管理包的方式安装和使用masks-js-travissivart库，它是一个简单易学、功能强大的JavaScript库。
1. 安装masks-js-travissivart
1.1 npm 包安装
安装 npm 包 masks-js-travissivart，可以在命令行中使用以下命令：
npm install masks-js-travissivart --save
安装完成后，可以在项目中使用 masks-js-travissivart 库：
import Masks from 'masks-js-travissivart';
1.2 CDN 引入
在 <head> 标签中添加以下代码即可使用：
<script src="https://cdn.jsdelivr.net/npm/masks-js-travissivart/build/masks.min.js"></script>
2. masks-js-travissivart的基本使用
masks-js-travissivart 库提供了一些常见的正则表达式，可以直接调用使用，甚至可以通过参数实现自定义正则表达式。
使用方法如下：
-- -------------------- ---- ------- -- --- ------- --- ---- ----- ------- - ----------------------------------- ----- ---- - ------------------------ -- ----------- --------------------- -- ------------- -- ---- ----- ---------- - ------------------ -------- --------------------- ----------------- ---- --- ------------------------------ -- -------------
其中，createMoneyMask() 是内置的货币格式匹配器，会将每 3 位数插入一个 “,” 符号并自动两位小数舍入到整数。
3. masks-js-travissivart 的示例
自定义一个数量格式匹配器：
const myMask = Masks.createMask({
pattern: /(\d{0,3})(\d{0,3})/,
patternDelimiter: ',',
});将该匹配器应用到一个输入框：
const myInput = document.getElementById('myInput');
myMask.attach(myInput);此时，在输入框中输入 123456，得到如下内容：123,456。
在绑定时指定其他参数，比如用其他符号作为分隔符：
myMask.attach(myInput, { delimiter: '.' });在表单上绑定时，可以使用以下方法（需要提供正确的选择器）：
Masks.bindInput('myInputSelector', myMask);4. 总结
本文介绍了如何使用 masks-js-travissivart 库快速简便地实现正则表达式的匹配功能，在日常web开发中可以降低开发难度，提高开发效率。在此基础上，开发者可以结合实际需要，自行定制更多复杂的正则表达式并应用到输入框中，实现更加严谨的数据处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf481e8991b448e6a87