HTML5输入属性，通过Javascript访问？
正如您可能知道的，在HTML5规范中，我们为<input>元素提供了一些新的属性，比如required和pattern。这为验证用户输入提供了一个很好的方法，我们甚至可以使用CSS和伪选择器来可视化它。示例
HTML
<input type="number" pattern="\d+" required/>CSS
input:required:valid {
border: 1px solid green;
}
input:required:invalid {
border: 1px solid red;
}如果<input>元素是<form>元素一部分，则用户将无法在invalid state中提交该元素。
然而，我的问题是，如果我们想使用那些不带<form>元素的新属性，该怎么办？有没有办法直接通过ECMAscript访问这样一个<input>节点的当前状态？
有什么活动吗？有听众吗？
回答 2
Stack Overflow用户
发布于 2013-01-29 23:00:46
正如@Zirak所指出的，有一个checkValidity方法，它是Constraint Validation API的一部分。
var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false然而，如果它是无效的，checkValidity会触发一个无效事件。(表单将以红色轮廓显示。)您可能希望改用willValidate属性(或.validity.valid属性)。
此外，validity属性非常值得关注(有关每个属性在Constraint Validation API上的含义的更多信息)：
s.validity
ValidityState
customError: false
patternMismatch: false
rangeOverflow: false
rangeUnderflow: false
stepMismatch: false
tooLong: false
typeMismatch: false
valid: false
valueMissing: true本文指出了两种浏览器在实现上的不同：http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/ (也就是:一如既往的一团糟)。
您还可以侦听在提交表单或调用checkValidity方法时触发的invalid事件。
Stack Overflow用户
发布于 2013-01-29 23:01:53
输入元素有一个validity属性：
var i = document.getElementsByTagName('input')[0]
i.validity.valid // True or false
console.log(i.validity);
// Logs (when `1` is entered):
ValidityState
customError: false
patternMismatch: false
rangeOverflow: false
rangeUnderflow: false
stepMismatch: false
tooLong: false
typeMismatch: false
valid: true
valueMissing: false有关我不打算复制的更多详细信息，请查看Florian Margaine's answer
https://stackoverflow.com/questions/14585789
复制相似问题
腾讯云开发者
