`.checkValidity()‘与HTML5 ` `pattern`’属性总是返回true

Question

我使用下面的代码片段来检查这个输入的有效性，以确保它不包含任何逗号：

​

var valid_part = document.getElementById("part");

if (valid_part.checkValidity()) {
  alert("Item Description contains no commas ");
}
else {
  alert("Item Description cannot contain a comma");
}

<input pattern="[^,]" type="text" id="part">

​

但是，无论输入值是什么，valid_part.checkValidity()总是返回true。

我已经在Debian上的Chromium和Firefox上，以及Android上的Chrome和Firefox上试过了，结果总是一样的。

这个函数有效吗？如果没有，应该使用另一种方法检查输入中的逗号吗？

Answer 1

来自 (重点雷)：

pattern：用于检查控件值的正则表达式。模式必须匹配整个值.

因此，[^,]的意思是“字符串恰好包含一个不是逗号的字符”。因此，您的验证检查实际上应该只返回除true以外的单个字符的,。它还返回空字符串的true，但实际上返回所有其他字符串的false。

您需要[^,]*，它的意思是“字符串包含任意数量的非逗号字符(包括无字符)”。

另外，从您提供的代码中还不清楚，但请确保该代码在需要验证时运行的函数中。示例片段：

​

document.getElementById("checker").addEventListener("click", function() {
  var valid_part = document.getElementById("part");

  if (valid_part.checkValidity()) {
    alert("Item Description contains no commas ");
  }
  else {
    alert("Item Description cannot contain a comma");
  }
});

<input id="part" type="text" pattern="[^,]*" />
<input id="checker" type="button" value="Check validity" />

​