如何使用正则表达式在 Vue3 中为车辆登记号创建输入字段掩码?
How to create an input field mask in Vue3 using regex for vehicle registration number?
如何使用正则表达式在 Vue3 中为车辆登记号创建输入字段掩码?我找到了屏蔽电话号码的解决方案,但是当我将正则表达式与字母混合使用时,它根本不起作用。
是否可以为 AAA-000 之类的内容创建掩码,即前三个输入为字母,后三个输入为以“-”分隔的数字?
答案:
Daniel 的回答对我很有帮助。如果有人在这里搜索相同的是 link :https://github.com/beholdr/maska
现场验证不仅仅是确保正则表达式有效。为了获得良好的 UX 体验,您需要确保用户可以在输入字段中编辑任何字符、删除字符并将值粘贴到其中。这就是为什么只使用已经具备所有可用功能的实现很方便的原因。
我过去使用的库是 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-###'>
如何使用正则表达式在 Vue3 中为车辆登记号创建输入字段掩码?我找到了屏蔽电话号码的解决方案,但是当我将正则表达式与字母混合使用时,它根本不起作用。
是否可以为 AAA-000 之类的内容创建掩码,即前三个输入为字母,后三个输入为以“-”分隔的数字?
答案:
Daniel 的回答对我很有帮助。如果有人在这里搜索相同的是 link :https://github.com/beholdr/maska
现场验证不仅仅是确保正则表达式有效。为了获得良好的 UX 体验,您需要确保用户可以在输入字段中编辑任何字符、删除字符并将值粘贴到其中。这就是为什么只使用已经具备所有可用功能的实现很方便的原因。
我过去使用的库是 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-###'>