html - 如何在 HTML5 中为 HTML 输入指定特定长度(5 或 10)

Question

我正在处理包含使用 HTML5 input 类型开发的 View 的 MVC 应用程序。
我有一个邮政编码字段，其验证应为 5 个或 10 个字符，如果用户输入低于 5 个或超过 5 个低于 10 个字符，则用户应该能够输入 5 个或 10 个。

他应该输入 5 个或 10 个字符。
下面是示例模式。

the format will be 99999[-9999] for example, 15220 or 15220-4056

我怎样才能做到这一点？

Answer 1

使用 pattern 属性和正则表达式进行验证。您可以更好地验证格式:

<input type="text" pattern="[0-9]{5}(-[0-9]{4})?" title="ZIP code, must match either 'XXXXX' or 'XXXXX-XXXX'">

pattern 属性的详细信息:参见 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

浏览器支持:参见 https://caniuse.com/#search=pattern

---

正则表达式 [0-9]{5}(-[0-9]{4})? 解释:

• [0-9]{5} 匹配 5 个数字
• (-[0-9]{4})? 匹配空字符串或“-XXXX”。

---

请注意，您不能仅依赖客户端验证。客户端验证改善了用户体验，但它很容易被操纵并且不能保护您免受恶意请求。需要服务器端验证。