基于HTML5的网页表单客户端验证技术的研究
2015-11-17王艳丽
王艳丽
摘要：该文针对HTML4表单验证需用JavaScript等编写复杂代码的问题，引入了HTML5。简要介绍HTML5表单的新特性，并用HTML5设计实现了用户注册页面，并在客户端进行了验证，希望给读者提供一定的参考。
关键词：HTML5；网页；表单；客户端验证
中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）24-0126-02
Web表单是访问者和网站互动的主要方式，从注册表单到联系信息表，从商业领域到政府部门，表单无处不在。访问者往网页表单输入信息的时候，必须按照网页对信息格式的要求来填写，如果所填写的信息没有按照网页的格式要求就无法通过网页对信息的验证，这时就必须要对所输入的信息的格式进行修改。但是当输入大量的表单信息的时候，通过人工来检查验证比较困难，所以必须要有相应的表单验证技术对表单中的数据进行验证。目前表单的验证技术主要有JavaScript、Jquery等，但是使用该类技术进行表单验证时需要编写复杂的代码，表单校验相对复杂，错误提示不够，网站可维护性较差。而用HTML5的表单设计的新特性，可以让表单验证变得更简单，更接近于客户端的验证。
1 HTML5的表单新特性
HTML5的表单是在HTML4表单部分的基础上新增加了一些特性，这些特性不仅能满足用户新的需求，而且减少了开发人员的工作量，提高了开发效率。HTML4中主要的表单标签有form、input、textarea、select和option等，在用户输入数据后，需要编写脚本进行数据合法性的验证，而且编码复杂，需要用复杂的正则表达式检验用户的输入是否合乎规范。而HTML5的input元素在原有基础上增加了许多新的输入类型及新的属性，这些新输入类型和新属性增加了数据检查的功能。Input元素的主要新增输入类型如下：
email类型：用于输入电子邮件地址，当提交表单时，会自动检测输入内容是否符合电子邮件格式，如果不符合，将给出错误提示。例如：E-mail：。
search类型：在网站中，用户经常进行信息搜索，HTML5增加了搜索控件，可以在搜索框中输入信息进行站点搜索。例如：
url类型：用于输入用户需要的网址信息，当表单提交时，会自动检测输入内容是否符合网址格式，如果不符合，将给出错误提示。
number类型：用于输入用户需要的数值信息，当表单提交时，如果输入的是非数值，将给出错误提示。
input元素的主要新增公共属性如下：
autofocus：用于设置在页面加载完毕时，页面中的控件是否自动获取焦点。
required：限制提交时元素内容不能为空。
pattern：通过正则表达式限制元素内容的格式，不符合格式则不允许提交。
min和max：限制数字类型或日期类型输入范围的最小值和最大值，不在范围内不允许提交。
step：限制元素的值每次增加或者减少的基数，不是基数的倍数时不允许提交。
2 基于HTML5的表单设计与验证
大多数的网站都有用户注册页面，下面就用HTML5的表单技术来设计注册页面，并对注册信息在客户端进行验证。
注册页面的效果如果所示。
如果输入的注册信息格式都是正确的，点击提交注册时，在客户端就会验证通过。但如果输入的注册信息格式不正确，点击提交注册时，客户端就会给出相应的错误提示信息。下面我们逐一进行验证。
如果输入的密码少于6位，或包含空格，或是9位一下的纯数字，提交时将给出如下图的提示信息。
如果输入的年龄不是0—99的整数，提交时将给出如下图的提示信息。
如果输入的电子邮件地址格式不正确，提交时将给出如下图的提示信息。
如果输入的网址格式不正确，提交时将给出如下图提示信息。
HTML5的编码如下：
<！DDCTYPE html>
3 结束语
HTML5表单的特点就是简洁漂亮，大大提高了程序员的开发效率，以后必将成为网页开发的主要技术之一。HTML5的验证功能也越来越接近客户端的验证，可以很有效地帮助用户填写正确的表单。但是HTML5的验证仍然替换不了服务器端验证，HTML5还处在完善阶段，很多技术还将有待进一步研究。本文主要利用HTML5实现了表单的设计与客户端的验证，希望给读者提供一定的参考，有不对的地方，请批评指正。
参考文献：
[1] http：//book.51cto.com[OL].
[2] http：//www.w3school.com.cn[OL].
[3] 邓梦德.HTML5的新特性及其在基于Web的教学平台开发中的应用前景[J].电脑知识与技术，2014（6）.
[4] 伍杰华.基于CSS3的HTML5网页表单研究与定制[J].计算机与信息技术，2013（12）.
