输入元素模式正则表达式不工作

Question

我希望该字段更改为绿色，因为它匹配4个字母后面跟着4个数字，如"blab1111"。

这是正则表达式代码:[A-Za-z]{4}+[0-9]{4} .
我也试过^[A-Za-z]{4}+[0-9]{4}$。

我正在使用这个代码:

 input:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:valid {
  background: hsla(100, 90%, 70%, 1);
}

<input type='text' required name='username' autocomplete="off" id='username' pattern="[A-Za-z]{4}+[0-9]{4}" maxlength="50" />

字段未正确切换到:valid状态

Answer 1

+在您的正则表达式上太多了。使用以下正则表达式:[A-Za-z]{4}[0-9]{4}或[A-Za-z]{4}d{4}

input:invalid {
  background: hsla(0, 90%, 70%, 1);
}
input:valid {
  background: hsla(100, 90%, 70%, 1);
}

<input type='text' pattern="[A-Za-z]{4}[0-9]{4}" required name='username' autocomplete="off" id='username' maxlength="50" />
<!-- shorter regex -->
<input type='text' pattern="[A-Za-z]{4}d{4}" required name='username' autocomplete="off" id='username' maxlength="50" />

Answer 2

[A-Za-z]{4}:字母字符4次

+:匹配一次或多次。[A-Za-z]{4}后面跟着+是一个错误的模式。

[0-9]{4}:数字4次。可以简写为d{4}。

然后，您可以删除required属性，因为它在模式中组合。

正确的正则表达式:[a-zA-Z]{4}[0-9]{4}或[a-zA-z]{4}d{4}

Answer 3

试试这个，

<input type='text' pattern="[A-Za-z]{4}d{4}" required name='username' autocomplete="off" id='username' maxlength="50" />

你也可以尝试这种模式，但我认为有些编辑器不支持这种模式，

[ul]{4}d{4}

[ul]匹配大小写字母