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

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

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

你可能知道,在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调用方法时触发事件。

热门问答

使用jenkins配合命令进行加固,在加固过程中提示40171,起码50%的概率出现?

whileideath

腾讯 · 运营开发工程师 (已认证)

web互助开发群:953701926,禁止广告,招聘行为。
推荐
内部返回数据解析失败(查毒) 指的是在apk进行加固之前会进行病毒检测,如果检测出现病毒,违法等应用将拒绝加固。 目前是该引擎存在故障。 ... 展开详请

腾讯加固助手不能下载了吗?下载地址在哪里?MAC可以下载吗?我看只能在网页上加固,自己签名。?

腾讯云@移动安全

腾讯 · 移动开发工程师 (已认证)

腾讯云移动安全前端开发
推荐

乐固客户端已下线,可以使用移动应用在线加固https://console.cloud.tencent.com/ms/reinforce/list

可以自行签名打渠道包。

腾讯云物联网设备端 C-SDK中coap sample运行失败getaddrinfo error?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐已采纳

用coap必须打开TLS,现在云端只支持DTLS的coap连接

节点数量如何计算?

吴楠NancyWU

腾讯云 · 高级产品经理 (已认证)

腾讯云区块链产品经理,与区块链一同成长,欢迎交流
推荐

建议网络测试可使用一个组1个节点配置,根据组织多少来定测试规模;企业应用以1个组织2个节点为基础起步,保持组织内的高可用,节点数量扩展根据组织数量和交易使用量增加,一个区块链网络内建议最多不超过100个节点。谢谢您的提问

关于云直播的几个问题,望大佬解惑?

学生路人
推荐

1 海外单独计费

2 地址都是自己算的 可以变也可以不变

3 这个接口是拉流转推的 ,和播放不是一个东西哈 。

能提供腾讯区块链TBaas技术上链对接的流程图吗?

您好,非常感谢您的建议,我们目前确实没有整理完整的流程图,我们会尽快补齐并上线。 文字版的流程您可以先参考一下: 1,梳理业务场景和流程 2,规划区块链网络规模 3,购买区块链节点、组建区块链网络 4,根据业务场景编写智能合约 5,应用系统调用区块链的智能合约,与链交互 如果...... 展开详请

扫码关注云+社区

领取腾讯云代金券