如何在 JS 中验证是否匹配了 HTML5 输入模式

Question

我有这样的东西：

<input type="text" id="number_field" pattern="[-+]?[0-9]*[.,]?[0-9]+" />

如果使用:invalid选择器不匹配模式，我可以定位自定义 css。

我想禁用一个提交按钮，如果未满足所有验证，该按钮将产生 XHR。

<button class="AdamBrown" onclick="saveAdamBrown(12)">Save</button>

如何评估 Javascript 中是否满足该模式？

Answer 1

var input = document.getElementById("number_field")
input.checkValidity()

checkValid将简单地返回真或假。如果想知道验证失败的原因，可以浏览input.validity对象。

Answer 2

您可以使用

HTML5 约束验证 API （https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation).您可以通过检查该元素的validity.patternMismatch值来检查输入模式检查是否有效。请参阅下面的代码段和示例：

const saveAdamBrown = num => console.log(num);
var numberField = document.getElementById("number_field");
var button = document.getElementsByClassName('AdamBrown')[0];
numberField.addEventListener("input", function (event) {
   button.disabled = numberField.validity.patternMismatch;
});

<input type="text" id="number_field" pattern="[-+]?[0-9]*[.,]?[0-9]+" />
<button class="AdamBrown" onclick="saveAdamBrown(12)">Save</button>