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

您可能知道，在HTML5规范中，我们获得了< input>的一些新属性。元素，如要求和模式。这提供了一种验证用户输入的好方法，甚至可以使用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>的一部分。元素，用户将无法将其提交到无效状态。

但是，我的问题是，如果我们要使用没有< form>的新属性，元素？是否存在访问这样的< input>的当前状态的方法。节点通过ECMAscript直接？

任何事件？任何听众？

解决方法

正如 @Zirak所指出的那样， checkValidity是 checkValidity的一部分。

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

但是，如果无效，checkValidity会触发无效事件。 (表单将被红色列出。)您可能需要使用willValidate属性(或.validity.valid属性)。

此外，有效性属性是非常有趣的(有关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/

原文地址：https://www.jb51.cc/html5/169015.html