npm 包 vanilla-masker 使用教程

在前端开发中，数据的格式化和输入验证是一个很重要的环节。而 VanillaMasker 是一个非常实用的 JavaScript 库，可以帮助我们方便地对表单输入进行掩码和格式化。本文将会介绍如何使用 npm 包 vanilla-masker 进行前端表单输入掩码的处理。

安装和引入

通过 npm 安装 vanilla-masker：

npm install vanilla-masker --save

然后在项目中引入 vanilla-masker：

import VanillaMasker from 'vanilla-masker';

或者在 HTML 文件中直接引入：

<script src="path/to/vanilla-masker.min.js"></script>

掩码使用

数字掩码

整数掩码（integer）

整数掩码可以用于限制用户只能输入数字，不能输入小数。下面是设置整数掩码的示例代码：

// 设置整数掩码
VanillaMasker(maskInput).maskNumber();

金额掩码（money）

金额掩码可以用于输入货币金额，支持小数点前和小数点后的位数的限制。下面是设置金额掩码的示例代码：

// 设置金额掩码
VanillaMasker(maskInput).maskMoney({
  precision: 2,
  separator: '.',
  delimiter: ',',
  unit: '$'
});

其中，precision 表示小数精度，separator 表示小数点分隔符，delimiter 表示千位分隔符，unit 表示货币符号。

文本掩码

大写字母掩码（uppercase）

大写字母掩码可以用于限制用户只能输入大写字母。下面是设置大写字母掩码的示例代码：

// 设置大写字母掩码
VanillaMasker(maskInput).maskPattern('SSSSS');

小写字母掩码（lowercase）

小写字母掩码可以用于限制用户只能输入小写字母。下面是设置小写字母掩码的示例代码：

// 设置小写字母掩码
VanillaMasker(maskInput).maskPattern('sssss');

字母掩码（letter）

字母掩码可以用于限制用户只能输入字母（大小写均可）。下面是设置字母掩码的示例代码：

// 设置字母掩码
VanillaMasker(maskInput).maskPattern('AAAAA');

字符串掩码（alphanumeric）

字符串掩码可以用于限制用户只能输入字母和数字。下面是设置字符串掩码的示例代码：

// 设置字符串掩码
VanillaMasker(maskInput).maskPattern('AAAAA11111');

输入值提取

除了掩码功能外，VanillaMasker 还提供了一些可以方便地提取输入值的方法。

获取纯数字

如果我们需要从输入框中获取用户输入的纯数字，可以使用 toNumber 方法：

let inputVal = VanillaMasker.toNumber(maskInput.value);

获取货币金额

如果我们需要从输入框中获取用户输入的货币金额，可以使用 toMoney 方法：

let inputVal = VanillaMasker.toMoney(maskInput.value, {
  precision: 2,
  separator: '.',
  delimiter: ',',
  unit: '$'
});

总结

本文介绍了如何使用 npm 包 vanilla-masker 对前端表单输入进行掩码和格式化。除此之外，VanillaMasker 还提供了一些其他有用的方法，如输入值提取等功能，可以大大方便我们的开发工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35535