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;
}

如果那个``元素是`

`元素的一部分，用户将无法以`invalid state`提交它。

然而，我的问题是，如果我们想在没有``元素的情况下使用这些新属性，有没有办法直接通过ECMAscript访问这样一个``节点的状态？

任何事件？任何监听器？

- jAndy

---

只是再次确认一下；您所说的“current state”，是指JS中检查输入有效性的一种方式（作为属性而不是函数，您必须编写）吗？ - Cerbrus

这是一个有趣的问题 - 我（稍微）研究了一下HTML5表单相关的东西，它似乎是根据与脚本语言无关的哲学设计的。您可以通过validityState属性读取“有效状态”，但我不知道是否在<form>之外会出现任何问题。 - Pointy

这篇 MDN 表单文章包含了你所需的一切。 - Christoph

是 validity 而不是 validityState，抱歉。 - Pointy

Answer 1

正如@Zirak指出的那样，这里有一个方法叫做checkValidity方法，它是约束校验API的一部分。

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

但是，如果checkValidity无效，它会触发一个无效事件（表单将被红色轮廓线突出显示）。您可能希望使用willValidate属性（或.validity.valid属性）代替。

此外，validity属性非常有趣（有关每个属性的更多信息，请参见约束验证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/

- Florian Margaine

---

耶，欢呼@Zirak。我现在只是做一些浏览器兼容性测试。 - jAndy

我在 validity 属性上赢了你 :P - Cerbrus

那个被你偷走声望的事情，Zirak会在你的梦中缠绕着你。 - GNi33

@GNi33，他必须排队等候。Grrrrr。 不过，高声望用户为他的答案增加了“有效性”，这也有所帮助 :P 另外一件事：“(即：它是…” 我知道你在做什么。 - Cerbrus

似乎在支持的浏览器中运行相当可靠。（我将fiddle添加到答案中）+1 - jAndy

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's answer

- Cerbrus

---

能否告诉我给我点踩的人为什么这样做？如果我犯了错误，我想从中学习。老实说，-2？这些踩是怎么回事？ - Cerbrus

我没有点踩，因为这是好的信息，但我认为该属性可能是“validityState”，而不仅仅是“validity”。编辑不，我错了，它是validity :-) - Pointy

@Pointy：Google Chrome 告诉我它是“validity”。（我总是在回答问题之前测试我的代码） - Cerbrus

@Pointy 属性是 validity，但构造函数对象是 ValidityState :-) - Florian Margaine