HTML5中表单验证的8种方法

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

可是真正的表单验证是什么？

是一种优化。

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

不过，浏览器的表单检查还不足以处理全部的错误。

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

在支持HTML5表单验证的浏览器中，能够经过表单控件来访问ValidityState对象:

var valCheck = document.myForm.myInput.validity;

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

调用方式以下：

valCheck.valid

执行完毕，咱们会获得一个布尔值，它表示表单控件是否已经过了全部的验证约束条件。能够把valid特性看作是最终验证结果：若是全部八个约束条件都经过了，valid特性就是true，不然，只要有一项约束没经过，valid标志都是false。
如前所述，任何表单元素都有八个可能的验证约束条件。每一个条件在ValidityState对象中都有对应的特性名，能够用适当的方式访问。让咱们逐一分析，看看它们是如何与表单控件关联的，以及如何基于ValidityState对象来对它们进行检查：

一、valueMissing

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

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

示例：

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

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

二、typeMismatch

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

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

示例：

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

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

三、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特性以说明规则的做用。

四、tooLong

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

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

示例：

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

详细说明：若是输入值的长度超过maxLength， tooLong特性会返回true。虽然表单控件一般会在用户输入时限制最大长度，但在有些状况下，如经过程序设置，仍是会超出最大值。

五、rangeUnderflow

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

用法：为表单控件设置min特性，并赋予容许的最小值。

示例：

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

详细说明：在须要作数值范围检查的表单控件中，数值极可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。

六、rangeOverflow

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

用法：为表单控件设置max特性，并赋予容许的最大值。

示例：

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

详细说明：与rangeUnderflow相似，若是一个表单控件的值比max更大，特性将返回true。

七、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值。

八、customError

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

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

示例：

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

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

 

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

好了，以上就是HTML5中表单验证的8种基本方法，但愿对初学者有所帮助。