您可能知道,在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/(即:像往常一样乱七八糟)