详解HTML5中表单验证的8种方法介绍


Posted in HTML / CSS onDecember 19, 2016

在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套系统,它为终端用户检测无效的控件数据并标记这些错误。换言之,表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。

但是真正的表单验证是什么?

是一种优化。

之所以说表单验证是一种优化,是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面,设计表单验证是为了让Web应 用更快地抛出错误。换句话说,最好利用浏览器内置的处理机制来告知用户网页内包含无效的表单控件值。过去,数据在网络上转一圈,仅仅是为了让服务器通知用 户他输入了错误的数据。如果浏览器完全有能力让错误在离开客户端之前就被捕获到,那么我们应该利用这个优势。

不过,浏览器的表单检查还不足以处理所有的错误。

话虽如此,HTML5还是引入了八种用于验证表单控件的数据正确性的方法。让我们依次了解一下,不过先要介绍一下用于反馈验证状态的ValidityState对象。

在支持Html5表单验证的浏览器中,可以通过表单控件来访问ValidityState对象:

var valCheck = document.myForm.myInput.validity;

这行代码获取了名为myInput的表单元素的ValidityState对象。对象包含了对所有八种验证状态的引用,以及最终验证结果。

调用方式如下:

valCheck.valid

执行完毕,我们会得到一个布尔值,它表示表单控件是否已通过了所有的验证约束条件。可以把valid特性看做是最终验证结果:如果所有八个约束条件都通过了,valid特性就是true,否则,只要有一项约束没通过,valid标志都是false。

如前所述,任何表单元素都有八个可能的验证约束条件。每个条件在ValidityState对象中都有对应的特性名,可以用适当的方式访问。让我们逐一分析,看看它们是如何与表单控件关联的,以及如何基于ValidityState对象来对它们进行检查:

1、valueMissing

目的:确保表单控件中的值已填写。

用法:在表单控件中将required特性设置为true。

示例:

<input type="text" name="myText" required>

详细说明:如果表单控件设置了required特性,那么在用户填写或者通过代码调用方式填值之前,控件会一直处于无效状态。例如,空的文本输入框无法通过必填检查,除非在其中输入任意文本。输入值为空时,valueMissing会返回true。

2、typeMismatch

目的:保证控件值与预期类型相匹配(如numbe、email、URL等).

用法:指定表单控件的type特性值。

示例:

<input type="email" name="myEmail">

详细说明:特殊的表单控件类型不只是用来定制手机键盘, 如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号,或者number型控件的输入值不是有效的数字,那么浏 览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况,typeMismatch将返回true。

3、patternMismatch

目的:根据表单控件上设置的格式规则验证输入是否为有效格式。

用法:在表单控件上设置pattern特性,井赋予适当的匹配规则。

示例:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

详细说明:pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后,只要 输入控件的值不符合模式规则,patternMismatch就会返回true值。从引导用户和技术参考两方面考虑,你应该在包含pattern特性的表 单控件中设置title特性以说明规则的作用。

4、tooLong

目的:避免输入值包含过多字符。

用法:在表单控件上设置maxLength特性。

示例:

<input type="text" name="limitedText" maxLength="140">

详细说明:如果输入值的长度超过maxLength, tooLong特性会返回true。虽然表单控件通常会在用户输入时限制最大长度,但在有些情况下,如通过程序设置,还是会超出最大值。

5、rangeUnderflow

目的:限制数值型控件的最小值。

用法:为表单控件设置min特性,并赋予允许的最小值。

示例:

<input type="range" name="ageCheck" min="18">

详细说明:在需要做数值范围检查的表单控件中,数值很可能会暂时低于设置的下限。此时,ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow

目的:限制数值型控件的最大值。

用法:为表单控件设置max特性,并赋予允许的最大值。

示例:

<input type="range" name="kidAgeCheck" max="12">

详细说明:与rangeUnderflow类似,如果一个表单控件的值比max更大,特性将返回true。

7、stepMismatch

目的:确保输入值符合min、max及step即设置。

用法:为表单控件设置step特性,指定数值的增量。

示例:

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明:此约束条件用来保证数值符合min、max和step的要求。换句话说,当前值必须是最小值与step特性值的倍数之和。例如,范围从0到100,step特性值为5,此时就不允许出现17,否则stepMismatch返回true值。

8、customError

目的:处理应用代码明确设置及计算产生的错误。

用法:调用setCustomValidity(message)将表单控件置于customError状态。

示例:

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明:浏览器内置的验证机制不适用时,需要显示自定义验证错误信息。当输入值不符合语义规则时,应用程序代码应设置这些自定义验证消息。

自定义验证消息的典型用例是验证控件中的值是否一致。例如,密码和密码确认两个输人框的值不匹配。只要定制了验证消息,控件就会处于无效状态,并且customError返回true。要清除错误,只需在控件上调用setCustomValidity("")即可。

好了,以上就是HTML5中表单验证的8种基本方法,希望对初学者有所帮助。也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 #HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 #HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 #HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 #HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 #HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 #HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 #HTML / CSS
You might like
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
javascript 写类方式之七
2009/07/05 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Django开发中复选框用法示例
2018/03/20 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
管道维修工岗位职责
2013/12/27 职场文书
关于安全的演讲稿
2014/05/09 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
自我推荐信怎么写
2015/03/24 职场文书
用人单位聘用意向书
2015/05/11 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Linux中如何安装并部署Redis
2022/04/18 Servers
keepalived + nginx 实现高可用方案
2022/12/24 Servers