[英]HTML5 input attributes, access via 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>
节点的当前状态 ?
有什么事吗? 有听众吗?
正如@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/ (即:像往常一样,这是一团糟。)
您还可以侦听在提交表单时触发的invalid
事件,或者在调用checkValidity
方法时。
演示 : http : //jsfiddle.net/XfV4z/
输入元素具有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 的回答
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.