ZIP Code（邮政编码）是美国邮政局用于邮递信件和包裹的一种编号方式。每个 ZIP Code 包含5位数字，有时还会在后面加上4位数字的扩展码（例如：90210-1234）。在前端开发中，常常需要验证用户输入的 ZIP Code 是否符合规范。
验证规则
ZIP Code 的验证规则如下：
- 必须为5位数字
- 可以包含前导零
- 如果有扩展码，则必须为9位数字，中间有一个连字符“-”
以下是一些有效的 ZIP Code 示例：
- 90210
- 10001
- 94102-1234
以下是一些无效的 ZIP Code 示例：
- 123456
- 9021
- 90210-12
正则表达式实现
我们可以使用正则表达式来验证 ZIP Code。以下是一个简单的正则表达式，它可以匹配符合规范的 ZIP Code：
/^\d{5}(-\d{4})?$/i这个正则表达式的含义是：
/^表示字符串的开始\d{5}匹配5个数字(-\d{4})?表示可选的扩展码，由一个连字符“-”和4个数字组成$表示字符串的结束/i表示不区分大小写
以下是一个示例函数，它可以接受一个字符串作为参数，并返回一个布尔值，表示该字符串是否为有效的 ZIP Code：
function isValidZipCode(zip) {
return /^\d{5}(-\d{4})?$/i.test(zip);
}错误提示
在验证用户输入时，我们应该向用户提供有用的错误提示。以下是一个示例函数，它可以接受一个字符串作为参数，并返回一个数组，其中包含任何验证失败的错误消息：
-- -------------------- ---- -------
-------- -------------------- -
----- ------ - ---
-- ------------------------------- -
---------------- ---- --------
-
------ -------
-实际应用
在实际应用中，我们可能需要在表单提交之前验证 ZIP Code。以下是一个示例表单，它使用上述函数来验证 ZIP Code 并显示错误消息：
-- -------------------- ---- -------
----- ---------------- ----------------
------ ------------- -------------
------ -------- ---------- ------------
---- ------------- --------------------
------- -------------------------
-------
--------
-------- -------------- -
----- --- - -------------------------------------
----- ------ - ---------------------
-- -------------- - -- -
--------------------------------------------- - --------------------
------ ------
-
------ -----
-
---------在这个示例中，validateForm() 函数在表单提交之前获取 ZIP Code 的值，并使用 validateZipCode() 函数来验证它。如果有任何错误消息，则将其显示在页面上，并阻止表单提交。
结论
ZIP Code 的验证是前端开发中一个常见的任务。通过使用正则表达式和错误提示，我们可以轻松地实现这项任务并提高用户体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/25570