手册

目录

Web Form API

收藏825

阅读599

更新时间2025-08-07

约束验证 DOM 方法

属性 描述
checkValidity() 如果 input 元素包含有效数据,则返回 true。
setCustomValidity() 设置 input 元素的 validationMessage 属性。

如果输入字段包含无效数据,则显示一条消息:

checkValidity() 方法




运行实例 »

点击 "运行实例" 按钮查看在线实例

约束验证 DOM 属性

属性 描述
validity 包含与输入元素有效性相关的布尔属性。
validationMessage 包含当有效性为 false 时浏览器将显示的消息。
willValidate 指示是否将验证 input 元素。

有效性属性

input 元素的有效性属性包含许多与数据有效性相关的属性:

属性 描述
customError 如果设置了自定义有效性消息,则设置为 true。
patternMismatch 如果元素的值与其 pattern 属性不匹配,则设置为 true。
rangeOverflow 如果元素的值大于其 max 属性,则设置为 true。
rangeUnderflow 如果元素的值小于其 min 属性,则设置为 true。
stepMismatch 如果元素的值对其 step 属性无效,则设置为 true。
tooLong 如果元素的值超过其 maxLength 属性,则设置为 true。
typeMismatch 如果元素的值对其 type 属性无效,则设置为 true。
valueMissing 如果元素(具有 required 属性)没有值,则设置为 true。
valid 如果元素的值有效,则设置为 true。

实例

如果输入字段中的数字大于 100(input 元素的 max 属性),则显示一条消息:

rangeOverflow 属性




运行实例 »

点击 "运行实例" 按钮查看在线实例

如果输入字段中的数字小于 100(input 元素的 min 属性),则显示一条消息:

rangeUnderflow 属性




运行实例 »

点击 "运行实例" 按钮查看在线实例

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号