Question

我希望字段更改为绿色，因为它匹配4个字母后跟4个数字，例如＆＃34; blab1111＆＃34;。

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

我正在使用此代码：

＆＃13;

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

＆＃13;

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

＆＃13;

该字段未正确切换到: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

也试试这个，

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

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

[\u\l]{4}\d{4}

[\u\l]匹配大写和小写字母。

Answer 3

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

+：匹配一次或多次。 [A-Za-z]{4}跟随+是错误的模式。

[0-9]{4}：Nummeric 4次。它可以是\d{4}的简写。

然后，您可以移除required属性，因为它已在模式中合并。

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

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

3 个答案: