跨平台HTML5实战任务7使用Javascript实现验证学习目标【知识目标】?进一步理解DOM的访问方法；?掌握表单事件；?
掌握多种原生和正则表单验证方法；?掌握由JavaScript设计表单验证方法；?掌握JavaScript的键盘事件；?
掌握即时型错误提示框；?掌握信息提示框的编写。【技能目标】?能实现多种表单验证方法、多种提示框；?初步体验增进适用性
的网页设计。引例描述作为名片的管理网站，用户使用时需要考虑实现注册登记功能，因此如何提供一个美观、高效的登录界面的要求摆在了
小新的面前。常见的登录界面包括输入登记人的名字、性别、联系方式等基本信息。而不同的信息牵涉到不同的格式，同时又必须确保用户名字
格式尽量保持同一，还要防止诸如注册机之类的骚扰软件的试探和攻击。因此，小新认为，登记界面的难点不在于布局，而在于对用户提交信息合法
性的判断。基于这些分析，小新制订了步步高的计划，初步分解了自己的任务：第一步：建立一个无需额外判断能力的信息录入界面；第二
步：完成对用户输入的信息进行处理的功能；第三步：美化设计。任务陈述小新按阶段分解的任务可以细化为以下几个步骤：第一步：熟悉
相关技术，完成知识准备；第二步：建立一个没有额外判断能力的信息录入界面；第三步：结合CSS，完善信息录入界面的美工和导航；第
四步：尽量采用简洁的正则表达式增加对信息判断的能力；第五步：采用JavaScript函数来增强一些无简便手段实现的判断。的基本
结构知识准备1HTML5自带验证功能2利用CSS样式显示提示信息3JavaScript验证4企业应用与HTML51HT
ML5自带验证功能1HTML5自带验证功能HTML5自带的客户端验证器其验证标准来源于类型，即自动根据text,
search,url,telephone,e-mail,password,datepickers,number,
checkbox,radio以及file类型来决定用何种标准来验证。HTML5网页默认开启此验证功能，但验证规则较简单，例如
text类型只能判断有或没有输入，e-mail类型则只能判断是否存在@字符。 1HTML5自带验证功能类型的r
equired属性required属性适用于以下类型：text,search,url,telepho
ne,e-mail,password,datepickers,number,checkbox,radio以及fi
le，为HTML5中的新属性。只要在类型的定义中出现了required字样，不管被赋值成0、1或直接赋字符串“re
quired”，均视为该条目必须要给定输入，如果定义了required但没给定输入时，表单提交时会停止运行并给出提示。1HTML
5自带验证功能正则验证虽然用JavaScript可写出复杂的验证器，但有时正则表达式是一个非常便捷有效的工具。例如，本案例中的手
机号码输入条目的验证规则非常简单：必须是十一位数字，且第一位必然为1，则其条目的代码可以如下设计，方便地实现了规则验证：utid="phone"name="phone"placeholder="phonenumber"type="text"
pattern="1\d{10}">1HTML5自带验证功能显示提示信息不同的网站对于用户数据经常不一致，因此为了便于用
户快速知晓本站的规则和要求，有必要在用户开始输入某个条目之前就用浮窗或者浮动信息条显示出提示信息，提高用户体验。采用place
holder属性可以实现这一效果。它提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得
焦点时消失。placeholder属性适用于以下的类型：text,search,url,telephon
e,e-mail以及password。而且placeholder属性也是HTML5中的新属性。HTML5的表单新增Bu
tton元素增加label元素增加filedset和legend元素新增optgroup元素增加accesskey属性增加disa
ble属性增加readonly属性input增加accept属性[type=file]表单的表现：opera和operamobi
le表单的表现：webkit表单：input:url“”表单：input:emailinput:searcht:telnputid=“inputEmail”type=“number”value=“”表单：input:rangeid=“inputEmail”type=“range”value=“”表单：input:max,min和steputid=“inputEmail”type=“number”value=“” umber”>numberstep tep=“5”max=“100”name=“number”/> ”>range x=“100”min=“0”step=“10”/> 表单：时间=“date”value=“”表单：input:datalistt”list=“dataList”/> >
结构类似select表单：placeorder“s”onfocus=“if(this.value==‘请输入关键字…’){this.value=“;}”}onblur=
“if(this.value==“){this.value=‘请输入关键词…’;}”value=“请输入关键词…”class=“i
ntputBox”>HTML5代码：输入关键词…”/>设置placeholder时，value值必须为空表单：autofocusHTML5代码：e=“text”value=“”autofocus/>可以用于input,textarea,button和select等元
素表单：正则表
单：验证2利用CSS样式显示提示信息2利用CSS样式显示提示信息标注必填项
目2利用CSS样式显示提示信息3JavaScript验证3HTML5常用标签JavaScript可以构建复杂的客户端
验证器，使用需要注意JavaScript验证器的使用需要修改代码中的两个位置，一是修改 |
|
