如何在JS中驗證HTML5輸入模式是否匹配？

Question

我有這樣的事情：

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

我可以指定自定義CSS如果模式沒有使用:invalid選擇匹配。

我想禁用一個提交按鈕，如果所有的驗證都不符合，就會生成一個XHR。

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

我如何評估在JavaScript中的圖案是否滿足？

Answer 1

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

checkValidity只會返回true或false。如果您想知道驗證失敗的原因，可以瀏覽input.validity對象。

Answer 2

您可以使用HTML5約束驗證API（https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation ）。您可以通過檢查該元素的validity.patternMismatch的值來檢查輸入模式檢查是否有效。請參考下面與示例代碼片段：

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>