使用Java格式自动格式化驾驶执照？

Question

我有一个输入框，输入美国驾驶执照号。但是，我希望它在键入时限制为这种格式（A1234567）。

我已经搜索过了，但是我只能找到RegEx。

root

预计会有一个自动格式化的驾驶执照号输入框。

（格式：A1234567）

非常感谢您的帮助。

Answer 1

现代浏览器具有内置的表单验证功能。他们可以为您检查正则表达式模式。最少要做的就是设置pattern属性。

让我们首先计算出所需的表达式。我假设从您的格式开始：

• 第一个字符始终为大写A。
• 此后将有7位数字，0至9。

为此，我们使用以下正则表达式：

A[0-9]{7}

基本上，这只需要文字A，然后在集合7中包含0-9个字符。

现在可以在HTML中使用它：

<input type="text" name="license" pattern="A[0-9]{7}">

对于不匹配的输入，浏览器将显示一些通用错误。但是，我们可以做得更好。这就是Constraint Validation API的来源。首先，将输入内容包装在<form>元素中：

<form>
  <input type="text" name="license" pattern="A[0-9]{7}">
</form>

现在，让我们添加一些JavaScript代码，以在每次input时（在输入字符或粘贴内容时有效）检查有效性：

const licenseEl = document.querySelector('input[name="license"]');

licenseEl.addEventListener('input', (e) => {
  e.target.setCustomValidity(''); // Clear any previous failed invalid messages
  e.target.checkValidity();
});

最后，如果输入无效，请添加我们的自定义消息：

licenseEl.addEventListener('invalid', (e) => {
  e.target.setCustomValidity('Enter a valid license number.');
});

您最终得到这样的东西：

作为奖励，您可以自动与屏幕阅读器，替代输入设备，将来的界面等兼容。

这是一个JSFiddle，因此您可以自己玩：https://jsfiddle.net/k7g2bj9L/1/

对于较旧的浏览器，您可能需要使用polyfill。当然，请始终在输入服务器端进行验证。可以完全绕开浏览器。