《HTML5实战》——2.4 利用约束验证API来检查表单输入数据-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5实战》——2.4 利用约束验证API来检查表单输入数据

简介:

本节书摘来自异步社区《HTML5实战》一书中的第2章,第2.4节,作者: 【美】Rob Crowther , Joe Lennon , Ash Blue , Grey Wanish 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.4 利用约束验证API来检查表单输入数据

本章开始时曾介绍过一些HTML5的新验证特性——required、pattern、min和max这些属性。通过使用这些属性,无需借助任何额外的JavaScript脚本,浏览器自身就可以验证表单输入字段的数据。然而,这些属性仅仅才是HTML5验证功能中的小角色而已,约束验证API才是主角。

本节主要内容

  • 如何使用validation属性和方法来设置自定义的验证测试。
  • 如何使用invalid事件来侦测已提交表单中的无效字段。
  • 如何使用CSS3中新增的伪类选择器为无效字段应用样式,而无需在输入元素中假如过多的类名。

    0372cdb236160f65b263f42b87900cce1d9698d8

    约束验证API所提供的方法与属性可以对指定元素的有效性进行侦测与修改。借助它可以实现其他的验证功能,并且还可以使用自定义的错误消息提示。可以侦测到字段是否存在错误,如果有错误,还可以侦测出错误类型以及要显示的错误消息提示。它还可以让我们自己来设置自定义验证消息,能够被浏览器原生显示出来。

    本节将继续开发我们的订单应用,接下来的内容分为两步。

    • 第1步:为输入元素添加自定义验证与自定义错误消息提示。
    • 第2步:侦测表单验证失败事件。
      尽管本书已经为该例提供了一个完整的CSS文件,你完全可以不必自己动手编码,但在本节最后,我们将介绍如何利用CSS3进行无效元素的样式,以便你将来能把这一点也用到自己开发的应用中。首先讨论一下约束验证API的属性与方法。

    2.4.1 利用setCustomValidity方法和ValidationMessage属性创建自定义验证测试和错误消息
    当浏览器或HTML5不支持验证功能时,应用就只好采用自定义验证测试。这种情况下,需要借助JavaScript来验证输入数据的有效性,并在验证失败时提供自定义错误消息提示。约束验证API所提供的setCustomValidity方法和validationMessage属性简化了自定义错误消息提示的实现。两种构建都允许应用将错误消息提示赋予< input >元素的validationMessage属性。具体采用哪种构建,则要跟据浏览器对setCustomValidity的支持来判断。

    第1步:为输入字段加入自定义验证与错误消息提示
    订单应用将利用setCustomValidity方法来执行自定义验证。

    • 用户全名长度必须至少4个字符。
    • 密码长度必须至少8个字符。
    • “设置密码”与“密码确认”内填入的数据必须一致。
    • 信用卡号的长度必须至少4个字符。
      接下来就为app.js加入这种自定义验证,将代码清单2-11所示的代码加到init函数的末尾,紧跟在对qtyListeners的调用的后面。


    <a href=https://yqfile.alicdn.com/1e58d438b8b458fb454002cfd20f3cad5af6eceb.png" >

    试试看

    如果你用兼容浏览器来打开订单页面,试着打破此前所说的自定义验证规则,那么自定义错误消息提示就会出现,如图2-10所示。

    接下来将使用invalid事件,当用户提交的页面中带有一个或更多的字段被标为无效时,该事件就会被触发。


    cd2f5a67e2b2d95bfed6de45aa68be8a0a0b2dec

    2.4.2 利用invalid事件来侦测失败的表单验证
    当用户试图提交一个使用了HTML5验证特性的表单时,只有当整个表单完全通过验证测试,submit事件才会触发。如果你需要侦测表单验证何时出问题,可以侦听新的invalid事件,该事件触发的条件只有以下两种。

    • 用户试图提交表单,但验证失败。
    • checkValidity方法已经被应用调用过,且返回false。
      第2步:侦测订单验证失败

    为表单的invalid事件添加一个侦听器,将代码清单2-12所示的代码加入上一节所完成的代码后面。


    69f8706d27c130d803f89412030e9520ba707e9a

    如果想为已提交表单中的错误表单字段添加一种样式,那么invalid事件就很有用了。下面就来学习它。
    **
    2.4.3 利用CSS3伪类来设置无效元素的样式**
    要想设置无效元素的样式,可以在迭代验证各个字段。一旦发现无效字段,就在该字段上应用CSS类。但这种方法太笨了,稍微用一下CSS3的一些技巧,你完全可以更简洁地实现它。

    CSS3引入了一些新的伪类,可以根据验证结果来设置表单字段的样式。只有当伪类为真时,这些样式才会被应用。下面这些伪类作用显而易见:

    • :valid
    • :invalid
    • :in-range
    • :out-of-range
    • :required
    • :optional
      你可能会猜到,伪类简化了无效字段的样式设置工作。例如,对于由约束验证API宣布为无效的元素,下面的代码会用淡红色的背景和栗色边界框来设置它们的样式。


    <a href=https://yqfile.alicdn.com/450934cb01a997945eae19dff785c9dea0a89b43.png" >

    但这种声明也存在一个问题:订单页面刚加载时,各字段是空的。所以对于那些使用required或pattern验证属性的字段来说,一开始就是无效的,所以那些添加了验证属性的字段,就会都显示出亮红色背景和栗色边框,这太难看了。

    幸好,这个问题解决起来并不难,当invalid事件已经触发,给父级表单添加一个类,并且为应用到表单中的输入元素及选择器元素的CSS规则中添加伪类选择器:invalid。

    注意 不要改变在本章刚开始时加入应用目录的CSS文件。本节将逐步介绍理论上你可能会采取的改变,而不是让你真的去修改它们。

    上一节中,你为父级表单添加了一个类,现在,在CSS中添加一个伪类选择器:invalid。


    <a href=https://yqfile.alicdn.com/6a15ea7314b5fe70745e290504c3446343f272c0.png" >

    另外,订单还用:required伪类选择器来为带有required属性的字段设置一种淡黄色背景的样式:


    <a href=https://yqfile.alicdn.com/e4b9067c836f84254511e2316e7656b36aad559e.png" >

    带有required属性的字段与无效字段的样式如图2-11所示。


    <a href=https://yqfile.alicdn.com/01fdbdb9da47daab60764d8270201eaddbfc5d82.png" >

    截止目前,对于大多数现今的浏览器而言(除了Safari之外),表单的功能基本上都可以用了。下一节将介绍如何使用Modernizr库来实现绝对可靠的特性侦测,以及如何使用polyfill来填补特性上的空白。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: