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);
}错误提示
在验证用户输入时，我们应该向用户提供有用的错误提示。以下是一个示例函数，它可以接受一个字符串作为参数，并返回一个数组，其中包含任何验证失败的错误消息：
// www.javascriptcn.com code example
function validateZipCode(zip) {
const errors = [];
if (!/^\d{5}(-\d{4})?$/.test(zip)) {
errors.push('ZIP Code 不符合规范');
}
return errors;
}实际应用
在实际应用中，我们可能需要在表单提交之前验证 ZIP Code。以下是一个示例表单，它使用上述函数来验证 ZIP Code 并显示错误消息：
// www.javascriptcn.com code example
<form onsubmit="return validateForm()">
<label for="zip">ZIP Code:</label>
<input id="zip" name="zip" type="text">
<div id="zipError" class="error"></div>
<button type="submit">提交</button>
</form>
<script>
function validateForm() {
const zip = document.getElementById('zip').value;
const errors = validateZipCode(zip);
if (errors.length > 0) {
document.getElementById('zipError').innerHTML = errors.join('<br>');
return false;
}
return true;
}
</script>在这个示例中，validateForm() 函数在表单提交之前获取 ZIP Code 的值，并使用 validateZipCode() 函数来验证它。如果有任何错误消息，则将其显示在页面上，并阻止表单提交。
结论
ZIP Code 的验证是前端开发中一个常见的任务。通过使用正则表达式和错误提示，我们可以轻松地实现这项任务并提高用户体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/25570