Javascript setCustomValidity 不适用于 Chrome 版本 65

Question

如果您想在 chrome 中使用 setCustomValidity 函数设置有效性，则消息未设置。

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

如您所见，如果您运行此 jsfiddle在 Firefox 和 Chrome 上，您可以看到在 Chrome 上该字段没有验证消息。

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

Chrome 有解决方法吗？

编辑:我已经记录了 bug在 Chrome 上。请随时关注此主题。

Answer 1

在我看来这像是一个错误。我试着跑 the example given in the spec , 在 JS fiddle here .同样，它适用于 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 attribute在输入上并提供一个正则表达式来验证输入。

为此，我将使用规范中给出的示例。您可以在 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 进行验证 - 并且您将无法验证字段组合的值。