HTML的约束验证

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

前言

今天我们来谈一谈H5里的约束验证，可能有点陌生，但是也是H5的重要知识点。

HTML5约束验证 API

HTML5为浏览器新增了在提交表单前验证数据的能力。这些能力实现了基本的验证,即使 JavaScript 不可用或加载失败也没关系。这是因为浏览器自身会基于指定的规则进行验证,并在出错时显示适当的错误消息(无须 JavaScript )。这些能力只有支持HTML5这部分的浏览器才有,包括所有现代浏览器(除了 Safari )和E10+。验证会根据某些条件应用到表单字段。可以使用 HTML 标记指定对特定字段的约束,然后浏览器会根据这些约束自动执行表单验证。

1.必填字段

第一个条件是给表单字段添加 required 属性,如下所示: < input type =" text ＂ name =" username ＂ required >

任何带有 required 属性的字段都必须有值,否则无法提交表单。这个属性适用于< input >、< textarea >和< select >字段( Opera 直到版本11都不支持< select >的 required 属性)。可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填: let isUsernameRequired = document . forms [0]. elements [" username "]. required ;

还可以使用下面的代码检测浏览器是否支持 required 属性: let isRequiredSupported =＂ required ＂ in document . createElement (＂ input ＂); 这行代码使用简单的特性检测来确定新创建的< input >元素上是否存在 required 属性。

注意,不同浏览器处理必填字段的机制不同。 Firefox 、 Chrome 、 I 和 Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框,而 Safari 什么也不做,也不会阻止提交表单。

2.更多输入类型

HTML5为< input >元素增加了几个新的 type 值。这些类型属性不仅表明了字段期待的数据类型,而且也提供了一些默认验证,其中两个新的输人类型是已经得到广泛支持的" email "和" url ",二者都有浏览器提供的自定义验证。比如:

< input type =" email ＂ name =" email ">< input type =" url ＂ name =" homepage ">

"emai1"类型确保输人的文本匹配电子邮件地址,而" url "类型确保输入的文本匹配 URL 。注意,浏览器在匹配模式时都存在问题。最明显的是文本"—@—"会被认为是有效的电子邮件地址。浏览器厂商仍然在解决这些问题。要检测浏览器是否支持这些新类型,可以在 JavaScript 中新创建一个输人元素并将其类型属性设置为"emai1"或" url ",然后再读取该元素的值。老版本浏览器会自动将未知类型值设置为" text ",而支持的浏览器会返回正确的值。比如:

 let input = document . createElement (" input ＂);
 input . type =＂ email ＂;
 let isEmailSupported =( input . type ==＂ email ");
复制代码

对于这两个新类型,除非应用了 required 属性,否则空字段是有效的。另外,指定一个特殊输人类型并不会阻止用户输人无效的值。新类型只是会应用一些默认验证。

数值范围

除了" email "和" url ",HTML5还定义了其他几种新的输人元素类型,它们都是期待某种数值输人的,包括:＂ number ＂、＂ range ＂、＂ datetime ＂、＂ datetime - local ＂、＂ date ＂、＂ month ＂、＂ week ＂和… time "。并非所有主流浏览器都支持这些类型,因此使用时要当心。浏览器厂商目前正致力于解决兼容性问题和提供更逻辑化的功能。本节内容更多地是介绍未来趋势,而不是讨论当前就能用的功能。对上述每种数值类型,都可以指定 min 属性(最小可能值)、 max 属性(最大可能值),以及 step 属性(从 min 到 max 的步长值)。例如,如果只允许输人0到100中5的倍数,那么可以这样写: < input type =" number ＂ min ="0＂ max ="100＂ step ="5＂ name =" count ＂>

根据浏览器的不同,可能会也可能不会出现旋转控件(上下按钮)用于自动增加和减少。上面每个属性在 JavaScript 中也可以通过对应元素的 DOM 属性来访问和修改。此外,还有两个方法,即 stepUp ()和 stepDown ()。这两个方法都接收一个可选的参数。

输入模式

HTML5为文本字段新增了 pattern 属性。这个属性用于指定一个正则表达式,用户输人的文本必须与之匹配。例如,要限制只能在文本字段中输入数字,可以这样添加模式: < input type =＂ text ＂ pattern =＂\ d +＂ name =＂ count ＂> 注意模式的开头和末尾分别假设有^和$。这意味着输人内容必须从头到尾都严格与模式匹配。与新增的输人类型一样,指定 pattern 属性也不会阻止用户输人无效内容。模式会应用到值,然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式: let pattern = document . forms [0]. elements [" count "]. pattern ;

使用如下代码可以检测浏览器是否支持 pattern 属性: let isPatternSupported =＂ pattern ” in document . createElement (" input ＂);\

5.检测有效性

使用 checkValidityO )方法可以检测表单中任意给定学段是否有效。这个方法在所有表单元素上都可以使用,如果字段值有效就会返回 true ,否则返回 false 。判断字段是否有效的依据是本节前面提到的约束条件,因此必填字段如果没有值就会被视为无效,而学段值不匹配 pattern 属性也会被视为无效。比如:

if ( document . forms [0]. element s [0]. checkValidity ()){
//字段效,继续) else {
//字段无效
return;
}
复制代码

要检查整个表单是否有效,可以直接在表单上调用checkValidity0)方法。这个方法会在所有字段都有效时返回 true ,有一个字段无效就会返回 false :\

 if ( document . forms [0]. checkValidity ()){ 在的学段出战勤夏8\
//表单有效,继续} else {
return;}
//表单无效 
复制代码

checkValidity ()方法只会告诉我们字段是否有效,而 validity 属性会告诉我们字段为什么有效或无效。这个属性是一个对象,包含一系列返回布尔值的属性。

customError :如果设置了 setCustomValidity ()就返回 true ,否则返回false 。 patternMismatch :如果字段值不匹配指定的 pattern 属性则返回 true 。
rangeOverflow :如果字段值大于 max 的值则返回 true 。口 rangeUnderflow :如果字段值小于 min 的值则返回 true 。
stepMisMatch :如果字段值与 min 、 max 和 step 的值不相符则返回 true 。
tooLong :如果字段值的长度超过了 maxlength 属性指定的值则返回 true 。某些浏览器,如
Firefox 4会自动限制字符数量,因此这个属性值始终为 false 。
typeMismatch :如果字段值不是" email "或" url "要求的格式则返回 true 。
valid :如果其他所有属性的值都为 false 则返回 true 。与 checkValidityO )的条件一致。
valueMissing :如果字段是必填的但没有值则返回 true 。

因此,通过 validity 属性可以检查表单字段的有效性,从而获取更具体的信息,如下面的代码所示:

 if ( input , valid í ty &&! input , validity . valid ){
 if ( input . validity . valueMiSsing ){ 
 console . log (＂ Please specify a value .＂)
 } 
 else if ( input , validity . typeMismatch ){
 console . log (＂ Please enter an emai1addresS,＂);
 }
 else {
 console . log (" Value is invalid .＂);
}
复制代码