JavaScript中四位数字邮政编码的精确验证：正则表达式误区与正确实践

/**
 * 验证邮政编码是否符合“仅包含四位数字”的要求。
 *
 * @param {HTMLInputElement} postcodeElement - 邮政编码输入框的DOM元素。
 * @returns {boolean} - 如果验证通过返回true，否则返回false。
 */
function validatePostcode(postcodeElement) {
  const postcodeValue = postcodeElement.value.trim();
  // 正确的正则表达式：匹配精确的四位数字
  const postcoderRegex = /^\d{4}$/; 

  if (postcodeValue === '') {
    setErrorFor(postcodeElement, '邮政编码不能为空');
    return false;
  } else if (!postcoderRegex.test(postcodeValue)) {
    setErrorFor(postcodeElement, '邮政编码必须包含四位数字');
    return false;
  } else {
    setSuccessFor(postcodeElement);
    return true;
  }
}

// 辅助函数：显示错误信息和样式
function setErrorFor(input, message) {
  const formControl = input.parentElement; // 获取父级元素，通常包含label和input
  let small = formControl.querySelector('small'); // 查找用于显示错误信息的元素
  if (!small) { // 如果不存在，则创建
    small = document.createElement('small');
    formControl.appendChild(small);
  }
  formControl.className = 'form-control error'; // 添加错误样式
  small.innerText = message; // 显示错误信息
}

// 辅助函数：显示成功状态和清除错误信息
function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success'; // 添加成功样式
  const small = formControl.querySelector('small');
  if (small) {
    small.innerText = ''; // 清除错误信息
  }
}

// 示例用法（在实际应用中可能绑定到表单提交或输入事件）
document.addEventListener('DOMContentLoaded', () => {
  const postcodeInput = document.getElementById('postcode'); // 假设存在id为'postcode'的输入框
  if (postcodeInput) {
    // 可以在 blur 事件（输入框失去焦点时）触发验证
    postcodeInput.addEventListener('blur', () => validatePostcode(postcodeInput));

    // 也可以在表单提交时统一验证
    const form = postcodeInput.closest('form'); // 查找最近的父级form元素
    if (form) {
      form.addEventListener('submit', (e) => {
        // 阻止默认的表单提交行为
        e.preventDefault(); 
        // 执行验证，如果验证失败则不提交
        if (validatePostcode(postcodeInput)) {
          console.log('邮政编码验证通过，可以提交表单。');
          // form.submit(); // 实际提交表单
        } else {
          console.log('邮政编码验证失败，请检查输入。');
        }
      });
    }
  }
});