如何让支持美加邮编的HTML5输入框Pattern兼容大小写？

Great question! Let's get this sorted out—your current regex has [a-zA-Z] which should technically match both cases, but we can simplify the pattern and ensure consistent case-insensitive matching with a cleaner approach.

Here's the revised input code with proper cross-case support and a streamlined regex:

<input 
  type="text" 
  id="zip" 
  name="zip" 
  pattern="(?i)^(?:\d{5}(?:-\d{4})?|[A-Z]\d[A-Z]\d[A-Z]\d(?: [A-Z]\d[A-Z]\d)?)$"
  data-pattern-error="For United States: xxxxx or xxxxx-xxxx; for Canada: X1X1X1 or X1X 1X1"
  placeholder="xxxxx-xxxx or X1X1X1 / X1X 1X1"
  data-required-error="Please provide your zip / postal code"
>

Key Changes Explained: #

• Case-Insensitive Flag: Added (?i) at the start of the regex. This tells the browser to ignore case when matching letters, so a and A are treated identically. No more need for verbose [a-zA-Z] ranges—we can just use [A-Z] and it works for both cases automatically.
• Streamlined Regex Structure:
  • US format: Simplified to \d{5}(?:-\d{4})? which matches 5-digit zips, optionally followed by a hyphen and 4 digits.
  • Canadian format: Combined the two variants (X1X1X1 and X1X 1X1) into [A-Z]\d[A-Z]\d[A-Z]\d(?: [A-Z]\d[A-Z]\d)?—the (?: ... )? makes the space and second half optional, reducing redundant code.
• Non-Capturing Groups: Used (?: ... ) instead of ( ... ) where we don't need to capture submatches, making the regex more efficient.
• Polished Error Text: Fixed a small grammar issue ("United State" → "United States") and adjusted formatting for better readability.

Why This Works Better: #

The (?i) flag is the most reliable way to enforce case-insensitive matching in HTML5's pattern attribute. While your original regex included [a-zA-Z], using the flag simplifies the pattern and eliminates the risk of typos or inconsistencies in character ranges.

Testing this input will now accept any combination of uppercase and lowercase letters for Canadian postal codes (e.g., m5v2t6, M5V 2T6, m5V2T6 all pass) while still validating US zip codes correctly.

内容的提问来源于stack exchange，提问作者govindak