HTML5中表单验证的8种⽅法
前⼀篇，我们介绍了，今天就继续来谈谈HTML5的表单验证。在深⼈探讨表单验证之前，让我们先思考⼀下表单验证的真实含义。就其核⼼⽽⾔，表单验证是⼀套系统，它为终端⽤户检测⽆效的控件数据并标记这些错误。换⾔之，表单验证就是在表单提交服务器前对其进⾏⼀系列的检查并通知⽤户纠正错误。
但是真正的表单验证是什么？
是⼀种优化。
之所以说表单验证是⼀种优化，是因为仅通过表单验证机制不⾜以保证提交给服务器的表单数据是正确和有效的。另⼀⽅⾯，设计表单验证是为了让Web应⽤更快地抛出错误。换句话说，最好利⽤浏览器内置的处理机制来告知⽤户⽹页内包含⽆效的表单控件值。过去，数据在⽹络上转⼀圈，仅仅是为了让服务器通知⽤户他输⼊了错误的数据。如果浏览器完全有能⼒让错误在离开客户端之前就被捕获到，那么我们应该利⽤这个优势。
不过，浏览器的表单检查还不⾜以处理所有的错误。
话虽如此，HTML5还是引⼊了⼋种⽤于验证表单控件的数据正确性的⽅法。让我们依次了解⼀下，不过
先要介绍⼀下⽤于反馈验证状态的ValidityState对象。
在⽀持HTML5表单验证的浏览器中，可以通过表单控件来访问ValidityState对象:
var valCheck = Input.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.");
详细说明：浏览器内置的验证机制不适⽤时，需要显⽰⾃定义验证错误信息。当输⼊值不符合语义规则时，应⽤程序代码应设置这些⾃定义验证消息。
html中提交表单用什么属性⾃定义验证消息的典型⽤例是验证控件中的值是否⼀致。例如，密码和密码确认两个输⼈框的值不匹配。只要定制了验证消息，控件就会处于⽆效状态，并且customError返回true。要清除错误，只需在控件上调⽤setCustomValidity("")即可。
好了，以上就是HTML5中表单验证的8种基本⽅法，希望对初学者有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。