求符合特定格式要求的HTML input pattern正则表达式规则

安全阿岳

2026-5-28

Solution for Your HTML Input Pattern Requirement

No problem at all! Let's craft the exact regex pattern you need by mapping your requirements step by step:

Step 1: Define the single valid substring

Each valid substring needs 3-4 lowercase letters followed by exactly one digit. That translates to:

[a-z]{3,4}[0-9]

[a-z]{3,4}: Matches 3 to 4 lowercase English letters
[0-9]: Matches exactly one digit (0-9)

Step 2: Handle multiple substrings with commas

We need to allow one or more of these substrings, separated by commas, with no leading or trailing commas. Here's how to combine that:

^[a-z]{3,4}[0-9](,[a-z]{3,4}[0-9])*$

Let's break this down:

^: Anchors the match to the start of the input (prevents leading commas or invalid characters before the first substring)
[a-z]{3,4}[0-9]: The first valid substring (required, so empty input is rejected)
(,[a-z]{3,4}[0-9])*: Matches zero or more additional substrings, each preceded by a comma (the * means this part is optional, so single-substring inputs are allowed)
$: Anchors the match to the end of the input (prevents trailing commas or invalid characters after the last substring)

Step 3: Apply it to your input element

Here's the ready-to-use code for your form:

<form>
  <input type="text" name="test" pattern="^[a-z]{3,4}[0-9](,[a-z]{3,4}[0-9])*$" title="Please enter valid substrings (3-4 lowercase letters + 1 digit), separated by commas (no leading/trailing commas)">
</form>

Note: Adding a title attribute is helpful—it shows a custom message to users when their input doesn't match the pattern.