模板
模板是一个字符串,其中特殊字符表示“此处输入……”,其余字符原样显示。
语法
| 字符 | 含义 |
|---|---|
9 | 数字 |
a | 任意字母 |
* | 字母或数字 |
[ ... ] | 可选部分:要么全部填写,要么不填 |
\ | 下一个字符原样输出:\9 显示数字九 |
| 其他字符 | 原样显示:括号、空格、短横线、+7 |
ts
mask('12345678', '(999) 999-99'); // '(123) 456-78'
mask('ab12', 'aa-99'); // 'ab-12'
mask('1230', '99:99[:99]'); // '12:30' — seconds are optional
mask('12', '\\9-99'); // '9-12'输入如何处理
- 不符合位置要求的字符会被跳过:
mask('a1b2', '99')→'12'。 - 最后一个输入字符之后的字面量不会补上 —— 用户看到的是
(123,而不是(123)。 - 输入中的字面量会与模板中的字面量匹配,因此对已格式化的值再次格式化不会改变结果。
- 多余的字符会被丢弃。
自定义令牌
令牌是匹配单个字符的正则表达式,还可以带有转换:
ts
const serial = createMask({
pattern: 'HH-HH-HH',
tokens: { H: { pattern: /[0-9a-f]/i, transform: 'upper' } },
});
mask('a1b2c3', serial); // 'A1-B2-C3'transform 可以是 'upper'、'lower' 或函数 (char) => string。
多个模板
模板数组:使用第一个能完整容纳输入的模板。请按从短到长的顺序列出:
ts
const code = createMask(['999-999', '9999-9999']);
mask('123456', code); // '123-456'
mask('12345678', code); // '1234-5678'模板函数
当模板取决于输入内容时 —— 例如取决于卡号的前几位:
ts
const cardMask = createMask({
pattern: (input) => (/^3[47]/.test(input) ? '9999 999999 99999' : '9999 9999 9999 9999'),
});模板开头的国家代码
如果模板以看起来像输入内容的字面量开头(+375、+998),只有当输入以 + 开头,或数字数量超过模板容量(粘贴了带代码的号码)时,才视为已输入。否则号码的第一位不会被国家代码“吞掉”:mask('331234567', phone('by')) → +375 (33) 123-45-67。
另请参阅
- createMask:全部选项
- 预设掩码