HTML表单验证,javascript实现表单验证
在进入表单验证之前，我们先思考一下表单验证的真正含义。表单验证的核心是为最终用户检测无效控制数据并标记这些错误的系统。换句话说，表单验证是在表单提交给服务器之前对表单进行的一系列检查，并通知用户纠正错误。
但是什么是真正的表单验证呢？
这是一种优化。
表单验证之所以是优化，是因为只有表单验证机制不足以保证提交给服务器的表单数据是正确有效的。另一方面，表单验证旨在使Web应用程序更快地抛出错误。换句话说，最好是利用浏览器内置的处理机制，通知用户网页包含无效的表单控件值。过去，数据在网络中传递只是为了让服务器通知用户他输入了错误的数据。如果浏览器完全能够允许错误在离开客户端之前被捕获，那么我们应该利用这个优势。
但是，浏览器的表单检查不足以处理所有错误。
说到这里，HTML5介绍了8种验证表单控件数据正确性的方法。让我们依次来看一下，但首先，让我们介绍一下用于反馈验证状态的ValidityState对象。
在支持Html5表单验证的浏览器中，可以通过表单控件访问ValidityState对象：
var val check=document . my form . my input . validity；这行代码获取名为myInput的表单元素的ValidityState对象。对象包含对所有八个验证状态和最终验证结果的引用。
呼叫模式如下：
当瓦尔。检查。valid，我们将得到一个布尔值，它指示表单控件是否通过了所有的验证约束。有效属性可视为最终验证结果：如果八个约束全部通过，则有效属性为真；否则，只要一个约束失败，有效标志就是假的。
如前所述，任何表单元素都有八个可能的验证约束。每个条件在ValidityState对象中都有一个对应的属性名，可以通过适当的方式访问它。让我们逐一分析它们，看看它们与表单控件的关系，以及如何基于ValidityState对象检查它们：
1、valueMissing
目的：确保填写表单控件中的值。
用法：在表单控件中将required属性设置为true。
示例：
input= text name= my text required详细说明：如果在表单控件上设置了required属性，则该控件将保持无效状态，直到用户填写值或调用代码。例如，一个空的文本输入框不能通过要求的检查，除非您在其中输入任何文本。当输入值为空时，valueMissing将返回true。
2、typeMismatch
目标：确保控件值与预期的类型(如数字、电子邮件、URL等)相匹配。).
用法：指定表单控件的type属性的值。
示例：
Input= email name= myemail 详细说明：特殊的表单控件类型不仅仅用于自定义手机键盘。如果浏览器可以识别出表单控件中的输入不符合相应的类型规则，例如，电子邮件地址中没有@符号，或者数字控件的输入值不是有效数字，那么浏览器会标记该控件以指示类型不匹配。无论哪种情况，typeMismatch都将返回true。
3、patternMismatch
目的：根据表单控件上设置的格式规则，验证输入的格式是否有效。
用法：设置表单控件的pattern属性，并分配适当的匹配规则。
示例：
input= text name= creditcardnumber pattern=[0-9]{ 16 } title=一个credit card number是16位数字，没有空格或破折号详细说明：Pattern特性为开发人员提供了一种强大而灵活的方式，为表单的控件值设置正则表达式验证机制。在为控件设置了pattern属性后，只要输入控件的值不符合模式规则，patternMismatch就会返回true值。从指导用户和技术参考两个方面来说，你应该在包含模式属性的列表控件中设置title属性来解释规则的作用。
4、tooLong
目的：避免输入值包含太多字符。
用法：设置表单控件的maxLength属性。
示例：
type= text name= limited text maxLength= 140 详细说明：如果输入值的长度超过maxLength，tooLong属性将返回true。虽然表单控件通常会限制用户输入时的最大长度，但在某些情况下，比如通过程序设置，还是会超过最大值。
5、rangeUnderflow
目的：限制数值控制的最小值。
用法：设置表单控件的min属性，并赋予它允许的最小值。
示例：
type= range name= age check min= 18 详细说明：在需要检查值范围的表单控件中，值可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow属性将返回true。
6、rangeOverflow
目的：限制数值控制的最大值。
用法：设置表单控件的max属性，并赋予它允许的最大值。
示例：
input= range name= kidagecheck max= 12 Details:与rangeUnderflow类似，如果表单控件的值大于max，该属性将返回true。
7、stepMismatch
目的：确保输入值符合最小值、最大值和步长的设置。
用法：设置表单控件的step属性，并指定数值的增量。
示例：
type= range name= confidence level min= 0 max= 100 step= 5 详细说明：该约束用于确保数值满足min、max和step的要求。换句话说，电流值必须是最小值和阶跃特征值的倍数之和。例如，范围是从0到100，step属性的值是5。此时不允许17，否则stepMismatch返回真值。
8、customError
目的：处理应用程序代码的显式设置和计算引起的错误。
用法：调用setCustomValidity(message)将表单控件置于customError状态。
示例：
passwordconfirmationfield . setcustomvalidity(密码值不匹配。);描述：当浏览器内置的验证机制不适用时，需要显示自定义的验证错误信息。当输入值不符合语义规则时，应用程序代码应该设置这些自定义验证消息。
验证自定义消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认输入框的值不匹配。只要自定义了验证消息，控件就将处于无效状态，customError返回true。若要清除错误，只需在控件上调用setCustomValidity(“”)。
好了，以上是HTML5中表单验证的八种基本方法。希望对初学者有帮助。也希望大家能支持我。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。