HTML5输入属性,通过Javascript访问?

时间:2013-01-29 14:56:22

标签: javascript html html5 css3

您可能知道,在 HTML5规范中,我们为<input>元素提供了一些新属性,例如requiredpattern。这提供了验证用户输入的好方法,我们甚至可以使用 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 个答案:

答案 0 :(得分:21)

正如@Zirak指出的那样,checkValidity方法是Constraint Validation API的一部分。

var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

但是,如果checkValidity无效,willValidate会触发无效事件。 (表单将以红色标出。)您可能希望使用.validity.valid属性(或validity属性)。

此外,s.validity ValidityState customError: false patternMismatch: false rangeOverflow: false rangeUnderflow: false stepMismatch: false tooLong: false typeMismatch: false valid: false valueMissing: true 属性非常有趣(关于每个属性在Constraint Validation API上的含义的更多信息):

checkValidity

本文指出浏览器之间的实现差异:http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/(即:像往常一样乱糟糟。)

您还可以收听提交表单时触发的invalid事件,或者调用{{1}}方法时。

演示http://jsfiddle.net/XfV4z/

答案 1 :(得分:5)

输入元素具有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