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

Question

您可能知道,在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>？

有什么事吗？有听众吗？

Answer 1

正如@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/

Answer 2

输入元素具有以下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 的回答