Javascript setCustomValidity 不适用于 Chrome 版本 65

如果您想使用 setCustomValidity 函数设置有效性（如下所示），则不会设置该消息。

<input type="text" id="username" required placeholder="Enter Name"
oninput="setCustomValidity('error')"  />

正如你所看到的，如果你运行这个jsfiddle在 Firefox 和 Chrome 上，您可以看到在 chrome 上该字段没有验证消息。

为了查看正在发生的事情，请转到 Firefox，打开 jsfiddle 并输入一些内容。输入内容后，单击外部并观察到添加了红色边框并显示文本“错误”。

Chrome 有解决方法吗？

Edit:我已经记录了bug关于铬。请随时关注此主题。

对我来说这看起来像是一个错误。我尝试跑步规范中给出的示例, in a JS在这里摆弄。同样，它适用于 Firefox，但不适用于 Chrome。

function check(input) {
  
  if (input.value == "good" ||
    input.value == "fine" ||
    input.value == "tired") {
    input.setCustomValidity('"' + input.value + '" is not a feeling.');
  } else {
    // input is fine -- reset the error message
    input.setCustomValidity('');
  }
}

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>

解决方法可能是使用pattern属性在输入上并提供一个正则表达式来验证输入。

我将使用规范中给出的示例来实现此目的。您可以在pattern属性中设置正则表达式模式，并在title属性中设置错误消息：

<label>Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling."></label>

这样，您可以使用伪选择器:invalid将红色边框（或其他任何内容）应用于输入：

input:invalid {
  border-color: red;
}

input:invalid {
  border-color: red;
}

<label>
  Feeling:
  <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling." value="good">
</label>

Fiddle: https://jsfiddle.net/065thz0w/21/

注意：这种方法的明显缺点是您无法再使用 Javascript 进行验证 - 并且您将无法验证字段组合的值。