详解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绘制出各种几何图形
Aug 17 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 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
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
用js来解决ajax读取页面乱码
2010/11/28 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
面试常见的js算法题
2017/03/23 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python中turtle作图示例
2017/11/15 Python
基于Python函数和变量名解析
2019/07/19 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
元旦晚会邀请函
2014/01/27 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
春节随笔
2015/08/15 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏