纯javascript html 5文本类型编号范围验证

Question

我有一个我正在构建的页面，并且没有导入jQuery的选项。 我需要能够确定是否有任何文本框使用纯JavaScript解决方案标记为html 5无效的伪造类。 更简单地说：我需要使用javascript来确定是否有任何文本框具有文本框被标记的红色轮廓，例如，如果您将文本放在type = number字段中。

为了完整起见，这里有一些示例代码：

<input type="number" min="1" max="31" id="txtCalDays" placeholder="##"/>
<input type="button" onclick="ValidateForm()"/> 
...
<script>
...
function ValidateForm(){
    ... //magic happens here
    if (numberInvalidTextboxes == 0){ SubmitFormViaAjax(); }
}

Answer 1

为每个元素提供一个id或一个class ，并以这种方式给出代码：

 window.onload = function () { document.getElementById("theFrm").onsubmit = function () { var inputs = document.querySelectorAll(".input"); for (var i in inputs) if (!inputs[i].validity.valid) { inputs[i].focus(); return false; } ajaxSubmit(); return false; }; }; 

 *:invalid, .error {border: 1px solid #f00; background: #f99;} 

 <form action="" id="theFrm"> <input type="number" min="1" max="31" id="txtCalDays" required placeholder="##" class="input" /> <input type="submit" onclick="ValidateForm()" /> </form> 

Answer 2

您可以使用querySelectorAll

document.querySelectorAll('input:invalid')返回文档中所有无效输入的数组，可以用任何类型的节点替换document 。

添加一些css，如:invalid{background-color: rgba(250,0,0,.15);}也可以使用。

Answer 3

您可以使用checkValidity()方法来检测html5输入元素的有效性。

document.getElementById('txtCalDays').checkValidity()

这是小提琴：

http://jsfiddle.net/k7moorthi/saobbfzo/

Answer 4

我认为您正在寻找的方法是checkValidity（）。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity

 ;(function(w,d,undefined) { "use strict"; function init() { // bind checkValidity() to button click d.querySelector("button.validity").addEventListener("click",checkValidity); } // loop through inputs and check validity var checkValidity = function() { var inputs = d.querySelectorAll('#f input'); [].forEach.call(inputs,function(input) { alert( 'validness of ' + input.name + ' is ' + input.checkValidity() ); }); }; // inititalize only when the DOM is ready d.addEventListener("DOMContentLoaded",init); })(window,document); 

 body { background-color: #DEF; } #f { width: 222px; position: relative; padding: 2em; margin: auto; } #f > * { margin-bottom: .25em; } #f label, button { float: left; clear: left; width: 100px; } #f input, #f button { float: left; width: 100px; } 

 <form id="f"> <label for="tel">Just Numbers</label><input type="text" name="numbrz" pattern="\\d+" /> <label for="email">Email</label><input type="email" name="email" /> <button type="button" class="validity">check validity</button> </form> 

Answer 5

您可以使用ValidityState.valid ：

 var input = document.getElementById("test"); input.addEventListener("change", function (event) { if (test.validity.valid) { input.classList.add("valid"); input.classList.remove("invalid"); } else { input.classList.add("invalid"); input.classList.remove("valid"); } }); 

 input.invalid { outline: 1px solid red; } 

 <input type="number" id="test"> 

现在您可以检查input.invalid而不是input:invalid selector。

要创建此跨浏览器，除了change事件之外，还可以绑定此事件侦听器，还可以绑定input ， blur ， keyup和keydown事件。 此外，您将需要一个用于classList的polyfill 。