18

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

有什么活动吗？有听众吗？

4

2 回答 2

21

正如@Zirak所指出的，有一个checkValidity方法，它是约束验证 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/

于 2013-01-29T15:00:45.850 回答
6

输入元素有一个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的答案

于 2013-01-29T15:01:52.700 回答