当前位置: 首页 > news >正文

html5表单元素验证,HTML5中新表单元素及表单验证

HTML5新表单

1、input新类型

①email类型

语法:

作用 -验证是否包含"@"

问题 -验证逻辑并不完整

②url类型

语法:

作用 -提交表单时,验证是否包含"http://"

问题 -验证逻辑并不完整

③tel类型-只在移动端显示

④number类型

语法:

min - 最小值

max - 最大值

step - 步长,默认值为1

⑤range类型

语法:

min - 最小值

max - 最大值

step - 步长

value - 当前值

⑥date类型

语法:

⑦week类型

语法:

⑧month类型

语法:

⑨color类型

语法:

(10)search类型--输入搜索关键字操作的文本框

语法:

2、表单新元素

①datalist元素--定义备选项(并不显示)

配合元素使用

定义list属性-属性值等于元素的id属性值

效果和下拉列表类似

特点 -数据与结构的分离

数据 -预定义数据内容

结构 -显示在HTML页面中的元素

优点 -使用元素定义的数据,可以重复使用

②progress元素---进度条

max - 设置进度条的最大值

没有min属性-最小值为0

value - 表示当前的进度值

③meter元素--刻度

min - 最小值

max - 最大值

value - 当前值

low - 低预警值

high - 高预警值

④output元素--输出

3、表单新属性

①placeholder属性 - 提供默认提示内容

语法:

作用 -类似于value属性

区别-

value属性值:显示为黑色,确实存在文本框中

placeholder属性值:显示为灰色,类似于背景存在

②multiple属性 - 允许输入多个值

语法:

作用 -允许输入多个值

注意 -多个值之间使用","

用法 -只定义属性名,没有属性值

③autofocus属性 - 自动获取焦点

语法:

作用 -自动获取焦点

用法 -只定义属性名,没有属性值

④form 属性- 允许表单元素定义在表单之外

语法:

原本的HTML页面中定义表单元素

所有的表单元素,必须定义在

元素中

作用 -允许将表单元素定义在

元素外元素外的表单元素,使用该属性

form属性值等于

元素的id属性值

4、表单新验证

(1)验证属性

①required属性:验证当前元素值是否为空

语法:

②pattern属性:使用正则表达式验证当前元素值是否匹配

语法:

注意 -并不能验证当前元素值是否为空

③min和max属性:验证当前元素值最小值或最大值

一般适用于number、range等元素

语法:

④minlength和maxlength属性

语法:

minlength - 验证当前元素值的最小长度

输入值时,不允许输入小于指定值

提交表单时,验证元素值最小长度

注意:minlength并不是HTML5新属性

maxlength - 验证当前元素值的最大长度

输入值时,长度不能大于指定值

⑤validity属性

语法:指定元素.validity.validityState

如:Elem.validity.valid

表单验证HTML5提供一种有效状态

有效状态通过validityState对象获取到

validityState对象可通过validity属性得到

验证(有效)状态

validityState对象提供了一系列的有效状态

通过这些有效状态,进行判断

注意:所有验证状态必须配合上述的验证属性使用

作用:用来替换原本手工实现的逻辑

(2)验证状态

①valid

作用 -判断当前元素值是否正确

注意:该状态返回true,表示验证成功;该状态返回false,表示验证失败

②valueMissing

作用 -判断当前元素值是否为空

用法 -配合required属性使用

③typeMismatch

作用 -判断当前元素值的类型是否匹配

用法 -配合email、number、url等

④patternMismatch

作用 -判断当前元素值是否与指定正则表达式匹配

用法 -配合pattern属性使用

⑤tooLong

作用 -判断当前元素值的长度是否正确

用法 -配合maxlength属性

注意:使用maxlength属性后,实际不可能出现长度大于maxlength的

值 ;tooLong很难出现这种情况

⑥rangeUnderflow

作用 -判断当前元素值是否小于min属性值

用法 -配合min属性

注意 -并不能与max属性值进行比较

⑦stepMismatch

作用 -判断当前元素值是否与step设置相符

用法 -配合step使用

注意 -并不能与min或max属性值进行比较

⑧customError

用法 -配合setCustomValidity()方法

如果使用该方法,该状态返回true

setCustomValidity()方法

作用 -设置自定义的错误提示内容

存在的问题 : 一旦使用该方法修改默认错误提示信息后

即使输入正确,错误提示依旧存在(逻辑错误)

解决:判断如果用户输入正确的话,调用该方法将信息设置为空("")

不能使用上述有效状态的任何一种判断输入是否正确(所有状态返回false)

相关文章:

  • html table 合并单元格 分页,element table组件合并单元格
  • html5发布系统,基于HTML5的电力信息发布管控系统
  • 911计算机专业基础综合,2017年北京物资学院计算机软件与理论911计算机学科专业基础综合之计算机组成原理考研题库...
  • 情感分析属于计算机科学,一种基于中文语义结构和细分词库结合的情感分析方法...
  • 轮换html,轮换HTML符号.
  • 计算机英语ppt演讲稿,英语的ppt演讲稿
  • html显示svg所有元素,SVG中的HTML元素未显示
  • 计算机多媒体专业就业现状,计算机多媒体技术就业前景怎么样
  • 个性签名html,简单个性签名大全2021最新版-简简单单的个性签名--个性简单签名设计-腾牛个性网...
  • 怎样调整计算机桌面字体大小,如何把电脑字体调小?教你怎么调整电脑屏幕的字体大小...
  • 计算机网络状态不存在,IP地址是什么?我地电脑上不去网,有时显示IP地址不存在是怎么了...
  • 省标准配置初中计算机室,最新初中9室及配置标准(62页)-原创力文档
  • 新疆计算机系一级教程,新疆计算机一级
  • 跑revit计算机硬件要求,BIM软件——Revit对电脑配置的要求分析
  • 计算机电缆订货标准,YVFB行车用电缆(扁电缆标准)
  • [译]如何构建服务器端web组件,为何要构建?
  • 【刷算法】求1+2+3+...+n
  • Angular Elements 及其运作原理
  • Django 博客开发教程 8 - 博客文章详情页
  • Druid 在有赞的实践
  • Electron入门介绍
  • Just for fun——迅速写完快速排序
  • MYSQL 的 IF 函数
  • Sublime text 3 3103 注册码
  • ViewService——一种保证客户端与服务端同步的方法
  • 分布式熔断降级平台aegis
  • 基于axios的vue插件,让http请求更简单
  • 聚簇索引和非聚簇索引
  • 让你的分享飞起来——极光推出社会化分享组件
  • 算法---两个栈实现一个队列
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 微信小程序设置上一页数据
  • 我的zsh配置, 2019最新方案
  • 怎样选择前端框架
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • #我与Java虚拟机的故事#连载18:JAVA成长之路
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (poj1.3.2)1791(构造法模拟)
  • (六)vue-router+UI组件库
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (轉)JSON.stringify 语法实例讲解
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • .net 设置默认首页
  • .NET/C# 使窗口永不获得焦点
  • .NET单元测试
  • .Net小白的大学四年,内含面经
  • .NET中两种OCR方式对比
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka
  • @Resource和@Autowired的区别
  • @Responsebody与@RequestBody
  • @zabbix数据库历史与趋势数据占用优化(mysql存储查询)
  • [ solr入门 ] - 利用solrJ进行检索
  • [bzoj1006]: [HNOI2008]神奇的国度(最大势算法)
  • [LeetCode]—Anagrams 回文构词法