首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML5输入属性,通过Javascript访问?

HTML5输入属性,通过Javascript访问?
EN

Stack Overflow用户
提问于 2013-01-29 22:56:22
回答 2查看 1.6K关注 0票数 18

正如您可能知道的,在HTML5规范中,我们为<input>元素提供了一些新的属性,比如requiredpattern。这为验证用户输入提供了一个很好的方法,我们甚至可以使用CSS和伪选择器来可视化它。示例

HTML

代码语言:javascript
复制
<input type="number" pattern="\d+" required/>

CSS

代码语言:javascript
复制
input:required:valid {
    border: 1px solid green;
}

input:required:invalid {
    border: 1px solid red;
}

如果<input>元素是<form>元素一部分,则用户将无法在invalid state中提交该元素。

然而,我的问题是,如果我们想使用那些不带<form>元素的新属性,该怎么办?有没有办法直接通过ECMAscript访问这样一个<input>节点的当前状态

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-01-29 23:00:46

正如@Zirak所指出的,有一个checkValidity方法,它是Constraint Validation API的一部分。

代码语言:javascript
复制
var s = document.createElement('input');
s.checkValidity(); // true
s.required = true;
s.checkValidity(); // false

然而,如果它是无效的,checkValidity会触发一个无效事件。(表单将以红色轮廓显示。)您可能希望改用willValidate属性(或.validity.valid属性)。

此外,validity属性非常值得关注(有关每个属性在Constraint Validation API上的含义的更多信息):

代码语言:javascript
复制
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/ (也就是:一如既往的一团糟)。

您还可以侦听在提交表单或调用checkValidity方法时触发的invalid事件。

演示:http://jsfiddle.net/XfV4z/

票数 21
EN

Stack Overflow用户

发布于 2013-01-29 23:01:53

输入元素有一个validity属性:

代码语言:javascript
复制
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

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14585789

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档