Question

我有一个带有模式验证的<input>元素。

<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" style="text-transform:uppercase" required/>

如果用户输入所有大写字符，则模式匹配有效，但如果有小写字符则失败。为什么模式匹配不考虑style="text-transform:uppercase"？

Answer 1

text-transform只是视觉上的变化，而不是数据变化。

请参阅以下示例以调试<input>：

＆＃13;

function debug()
{
  let inpItem = document.getElementById('some');
  let inpValue = document.getElementById('some').value;
  
  //alert the actual value on input.
  console.log(inpValue);
  
  //set text-transform to default.
  inpItem.style='text-transform:none';
}

＆＃13;

input {
  text-transform:uppercase;
}

＆＃13;

<button onclick="debug()">Debug</button>
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" required/>

＆＃13;

如何只能以大写字母输入？

您可以使用JavaScript将所有输入值设置为大写值。

＆＃13;

function debug()
{
  let inpItem = document.getElementById('some');
  let inpValue = document.getElementById('some').value;
  
  //alert the actual value on input.
  console.log(inpValue);
  
  //set text-transform to default.
  inpItem.style='text-transform:none';
}

＆＃13;

<button onclick="debug()">Debug</button>
<input type="text" id="some" pattern="^[A-Z]{5}$" name="some" maxlength="5" onkeyup="javascript:this.value=this.value.toUpperCase();" required/>

＆＃13;

Answer 2

模式忽略text-decoration: uppercase;，因为它只有样式和原始文本仍然按照输入的方式进行格式化。

您应该更改模式以检查大写和小写符号。

^[A-Za-z]{5}$

Answer 3

我不知道为什么会发生这种情况，也许在将样式赋予输入文本之前处理模式，但我看到你正在尝试创建一个模式来接受最多五个拉丁字符（大写或小写），因为你要将它们全部改为大写），那你为什么不在你的模式中添加小写字母呢？

pattern="^[A-Za-z]{5}$"

Answer 4

只有连续5个大写字母才能使用正则表达式，您可以在此处查看http://regexr.com

HTML模式匹配无法正常工作

4 个答案: