Javascript 输入范围是否存在无效状态？

我需要在应用程序的设计系统中定义自定义HTML5表单验证样式，如。但是我不知道如何将

：invalid

状态应用于

console.log（$（'#test'）.val（））；
$（'测试'）.val（50）；
log（$（'#test'）.val（））
。有效消息，
.无效消息{
显示：无；
}
.input:有效~。有效消息{
显示：块；
颜色：绿色；
}
.input:无效~。消息无效{
显示：块；
颜色：红色；
}

这是有效的
这是无效的
通过在Chrome和Firefox上进行测试，我认为没有
：对于
type=“range”
，可能会出现无效的
状态。任何超出范围的值都会自动增加或减少到
min
或
max

Mozilla将设置和替换为平均值


但我不知道如何将
：invalid
状态应用于

实际上，您不能将
：无效的
状态应用于
，因为该值将始终设置在
最小值
和
最大值
之间，并且您不能强制它超出范围，它将自动更新以适应
范围

如果您检查值部分中的，您可以看到：

如果试图将该值设置为低于最小值，则会将其设置为最小值。类似地，如果试图将该值设置为高于最大值，则会将其设置为最大值

仅当调用了
setCustomValidity（）
时，范围控件才可能无效

参考本规范

它永远不会是状态，因为它具有默认值。
绝对不会，因为UA必须根据规范调整值。
要使范围输入处于无效状态，只需设置步骤属性。
对于
而言，0.25的值无效。
但根据MDN，大多数浏览器可能会将该值舍入到最接近的有效值

Firefox似乎没有做到这一点，因为在编程设置一些不符合（min+n*步数）的值时，我的范围输入以红色突出显示

也许你可以使用我做了一些测试，但我似乎无法创建无效的范围输入。将该值设置为超出范围（包括向源添加
value=“50”
属性）将导致该值捕捉为最小值或最大值。（换句话说，这样的输入总是有效的。但是，我希望显示错误！我认为@MrLister是对的，您不能在客户端设置无效值。从如果试图将值设置为低于最小值，则会将其设置为最小值。同样，试图将值设置为高于最大值，则会将其设置为最大值。“@SuperDJ谢谢，但正如@lister先生所说，我无法复制
：超出范围的
。出于测试目的，如果您想模拟如果这些状态可能被触发（在调试期间）会发生什么情况，只需输入
type=“number”
。然后它的工作原理类似，只是您可以给它一个无效值。我可以看看规范吗？W3C或其他@Alex我已经重写了我的答案，以便更准确。我可以通过
document.getElementById（“测试”）.setCustomValidity（“错误消息”）来确认无效状态
。我在这里学到了新知识，我可以忽略范围输入无效样式的设计。谢谢！