HTML 5输入属性,通过Javascript访问?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

你可能知道,在HTML5规范中,我们为<input>元素提供了一些新的属性,例如requiredpattern。这提供了一个验证用户输入的好方法,我们甚至可以使用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>元素的新属性呢?我们怎么做?

提问于
用户回答回答于

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

您也可以监听该invalid事件,在提交表单时或checkValidity调用方法时触发事件。

用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券