如何使用正则表达式在 Vue3 中创建车辆登记号的输入字段掩码？

Question

如何使用正则表达式在 Vue3 中创建车辆登记号的输入字段掩码？我找到了屏蔽电话号码的解决方案，但是当我将正则表达式与字母混合时，它根本不起作用。

是否可以为 AAA-000 之类的内容创建一个掩码，即前三个输入为字母，后三个输入为以“-”分隔的数字？

回答：

丹尼尔的回答对我来说就像魅力一样。如果有人正在寻找相同的内容，请点击链接：https://github.com/beholdr/maska

Answer 1

现场验证不仅仅是确保正则表达式有效。为了获得良好的用户体验，您需要确保用户可以编辑输入字段中的任何字符、删除字符并将值粘贴到其中。这就是为什么使用已经具备所有可用功能的实现会很方便。

我过去使用的库是maska，它与 Vue3 兼容。

它允许您使用替换掩码创建字段

tokens = {
    '#': { pattern: /[0-9]/ },
    'X': { pattern: /[0-9a-zA-Z]/ },
    'S': { pattern: /[a-zA-Z]/ },
    'A': { pattern: /[a-zA-Z]/, uppercase: true },
    'a': { pattern: /[a-zA-Z]/, lowercase: true },
    '!': { escape: true },
    '*': { repeat: true }
}

如果这些还不够，它允许您定义其他标记

但这些应该足以满足你的需要

<input data-mask='AAA-###'>