纯javascript html 5文本类型数字范围验证答案

【问题标题】：Pure javascript html 5 text type number range validation纯javascript html 5文本类型数字范围验证
【发布时间】：2016-01-06 15:12:12
【问题描述】：

我正在构建一个页面，但没有导入 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(); }
}

【问题讨论】：

":invalid" 是一个 CSS 选择器，您可以使用它来查找它们
要添加到@dandavis 的答案，:invalid 仅支持 IE10+，如果您有任何考虑的话。

标签： javascript html validation input

【解决方案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>

【讨论】：

如何实现 html5 验证状态？
@dandavis 不允许用户提交，返回false。
这不仅不使用控件的有效/无效状态，还将脚本与数据库的形状联系起来。这是不可接受的，因为必须尽量减少添加或删除列时需要进行的更改量。
更新后的答案仍然忽略 html 5 验证类型。向控件添加类不是我需要的解决方案
@MetalPhoenix 再次更新。对不起。

【解决方案2】：

您可以使用querySelectorAll

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

添加一些像:invalid{background-color: rgba(250,0,0,.15);} 这样的css 也很有用。

【讨论】：

document.querySelectorAll('input:invalid').length > 0 解决方案正是我一直在寻找的，并且似乎适用于 Firefox、chrome 和 IE。谢谢。
旧版 IE 不支持 html5 输入 :P
好吧，不是我想要的。我们仍然需要支持一些带有 IE 9 的计算机。
IE9 可以使用:invalid 和querySelectorAll，但不支持type="number" :/.
@Tim MetalPhoenix 不想使用 jQuery，这可能是任何库的情况。

【解决方案3】：

你可以使用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;
}

&lt;input type="number" id="test"&gt;

现在您可以检查 input.invalid 而不是 input:invalid 选择器。

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

【讨论】：

【解决方案4】：

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

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

这是小提琴：

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

【讨论】：

我最终会这样做，遍历包含控件中的每个输入。我更喜欢更清洁的input:invalid 伪类解决方案，但这是我必须使用的，因为我们仍然支持 IE 9。谢谢！
@MetalPhoenix 您仍然需要像@hexaheart 指出的那样填充<input type="number">。
请注意：IE 不支持 checkValidity 但我正在做的其他验证弥补了这一点（服务器端和客户端） - 无论我们的员工使用哪种浏览器，它们都会一起验证使用。 CheckValidity 最终在除 IE9 之外的所有其他浏览器上都能完美运行，因此这是一个“双赢”的解决方案。谢谢。

【解决方案5】：

我认为您正在寻找的方法是 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>

【讨论】：