详解HTML5中表单验证的8种方法介绍
138 浏览量
2020-09-27
23:41:32
上传
评论
收藏 79KB PDF 举报
详解详解HTML5中表单验证的中表单验证的8种方法介绍种方法介绍
表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误，本篇文章主要介绍了详解
HTML5中表单验证的8种方法，具有一定的参考价值，有兴趣的可以了解一下。
在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测
无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。
但是真正的表单验证是什么？
是一种优化。
之所以说表单验证是一种优化，是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面，
设计表单验证是为了让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特性，井赋予适当的匹配规则。
示例：
资源评论
