javascript - 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> 的情况下使用这些新属性怎么办？元素？有没有办法访问这样一个 <input> 的当前状态直接通过 ECMAscript 节点？

任何事件？有听众吗？

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/