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

我有一个正在构建的页面，没有导入jQuery的选项。我需要能够使用纯javascript解决方案确定是否有任何文本框被标记为HTML5无效psuedoclass。更简单地说：我需要使用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(); }
}

...
...
函数ValidateForm（）{
…//这里发生了奇迹
如果（numberInValidTextBox==0）{SubmitFormViaAjax（）；}
}

为每个元素提供一个

id

或

类

，并按以下方式提供代码：

window.onload=函数（）{
document.getElementById（“theFrm”）.onsubmit=function（）{
var输入=document.queryselectoral（“.input”）；
用于（输入中的var i）
如果（！inputs[i].validity.valid）{
输入[i].focus（）；
返回false；
}
ajaxSubmit（）；
返回false；
};
};
*：无效，.error{边框：1px实心#f00；背景：#f99；}

您可以使用

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

添加一些css，如
：无效{背景色：rgba（250,0,0,15）；}
也可以使用。
您可以使用：


var input=document.getElementById（“测试”）；
input.addEventListener（“更改”，函数（事件）{
if（test.validity.valid）{
input.classList.add（“有效”）；
input.classList.remove（“无效”）；
}否则{
input.classList.add（“无效”）；
input.classList.remove（“有效”）；
}
});
input.invalid{
轮廓：1px纯红；
}
您可以使用
checkValidity（）
方法检测html5输入元素的有效性

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

这是小提琴：

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



；（功能（w、d、未定义）{
“严格使用”；
函数init（）{
//将checkValidity（）绑定到按钮单击
d、 querySelector（“button.validity”）。addEventListener（“单击”，检查有效性）；
}
//循环输入并检查有效性
var checkValidity=函数（）{
变量输入=d.querySelectorAll（“#f输入”）；
[]forEach.call（输入，函数（输入）{
警报（“+input.name+”的有效性为“+input.checkValidity（））；
});
};
//仅当DOM就绪时才初始化斜体
d、 addEventListener（“DOMContentLoaded”，init）；
})（窗口、文件）
正文{
背景色：#DEF；
}
#f{
宽度：222px；
位置：相对位置；
填料：2米；
保证金：自动；
}
#f>*{
边缘底部：.25em；
}
#f标签、按钮{
浮动：左；
清除：左；
宽度：100px；
}
#f输入，#f按钮{
浮动：左；
宽度：100px；
}

只是数字
电子邮件
检查有效性
“：invalid”是一个css选择器，您可以使用它来查找它们以添加到@dandavis的答案中，
：invalid
仅在IE10+中受支持，如果您需要考虑的话。这是如何实现html5验证状态的？@dandavis它将不允许用户提交，返回false。这不仅不会使用控件的有效/无效状态，还会将脚本绑定到数据库的形状。这是不可接受的，因为添加或删除列时需要进行的更改量必须最小化。更新的答案仍然忽略html 5验证类型。将类添加到控件不是我想要的解决方案need@MetalPhoenix再次更新。抱歉。
document.queryselectoral（'input:invalid'）。length>0
解决方案正是我想要的，似乎在firefox、chrome和IE中都能使用。谢谢。IE的旧版本无论如何都不支持html5输入：POkay，不是我想要的。我们仍然需要支持一些使用IE 9的计算机。IE9可以使用
：无效的
&
查询选择程序所有
，只有
type=“number”
不受支持：/。@Tim metalfenix不想使用jQuery，这可能是任何库的情况。我将继续讨论这个问题，遍历包含控件中的每个输入。我更喜欢cleaner
input:invalid
伪类解决方案，但这是我必须使用的，因为我们仍然支持IE9。谢谢大家!@MetalPhoenix您仍然需要像@hexaheart指出的那样多填充
。只需注意：IE中不支持checkValidity，但我正在进行的其他验证弥补了这一点（服务器和客户端）-无论我们的员工使用哪种浏览器，它们都会一起进行验证。CheckValidity最终在除IE9之外的所有其他浏览器上都能很好地工作，因此这是一个“双赢”的解决方案。谢谢