前端开发中，我们经常需要用到表单输入框的格式控制，比如输入电话号码、身份证号码等等。而 aldo-react-text-mask 是一个非常方便的 npm 包，它可以帮助我们快速实现常见的格式控制，本篇文章将详细介绍它的使用教程。
安装
npm install aldo-react-text-mask --save
使用方法
在项目的入口文件中引入 aldo-react-text-mask 的相关组件，比如：
import MaskedInput from "aldo-react-text-mask";
import createNumberMask from "aldo-react-text-mask";
import { emailMask } from "aldo-react-text-mask";这里我们讲解三个主要的函数：
MaskedInput
这个函数是最常用的，它用来生成用户输入控件，比如：
<MaskedInput
mask={[/\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/]}
placeholder={"输入日期"}
guide={true}
id="input"
className="form-control"
/>这里的 mask 参数是一个数组，表示输入框允许输入的字符类型。本例中，它的值是 [/\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/]，表示输入 01-01-00 等形式的日期。注意，由于 \ 在 JavaScript 中是转义字符，因此我们需要用 \\d 表示一个数字，更多关于正则表达式的语法可以参考 MDN 的文档。
其他参数和使用方式可以参考 aldo-react-text-mask 的文档。
createNumberMask
在处理数字输入时，我们通常需要格式化数字，比如加上千分位分隔符。createNumberMask 就是用来处理这个问题的，具体使用方法如下：
-- -------------------- ---- ------- ------ ---------------- ---- ----------------------- ----- ---------- - ------------------ ------- --- ------- ---- ------------------------- ---- ------------- ----- ------------- -- -------------------------- ----- -------------- ----- ---
这里的 createNumberMask 函数会返回一个格式化数字的函数 numberMask，参数包括 prefix、suffix、thousandsSeparatorSymbol、allowDecimal、decimalLimit、includeThousandsSeparator、allowNegative 等，并且都是可选的。下面是参数的含义：
prefix：在数字前添加的内容，比如货币符号等。suffix：在数字后添加的内容，比如货币符号等。thousandsSeparatorSymbol：千分位分隔符，比如“,”。allowDecimal：是否允许输入小数。decimalLimit：保留的小数位数。includeThousandsSeparator：是否允许输入千分位分隔符。allowNegative：是否允许输入负数。
比如你可以这样使用它：
<MaskedInput
mask={numberMask}
guide={false}
id="maskNumber"
className="form-control"
/>emailMask
还有一种常见的场景是，需要要求用户输入邮箱地址，而这时候我们可以使用预定义的 emailMask，如下：
import { emailMask } from "aldo-react-text-mask";
<MaskedInput
mask={emailMask}
guide={false}
id="maskEmail"
className="form-control"
/>总结
以上就是 aldo-react-text-mask 的常规使用方法，通过它，我们可以轻松实现常用的输入控制，并简化代码。但需要注意的是，由于 npm 包的多样性和机制，我们在使用前一定要仔细阅读官方文档，并保证安全性和合法性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e3592