T05 表单验证技术与特效

制作即时提示错误的输入框
演示案例： 演示案例：即时提示错误的输入框
本章目标
会使用表单事件和脚本函数实现表单验证 会使用图片代替提交按钮 会使用onKeyDown事件检查用户输入的特殊字符 会使用DIV的innerHTML或innerText动态显示内 容 会使用正则表达式进行表单验证
为什么需要表单验证
表单验证的思路表单验证的思路-2
常用的String对象
使用 var 语句 var newstr = "这是我的字符串" 创建 String 对象 var newstr = new String("这是我的字符串“) 调用方法和属性 字符串对象.属性名 字符串对象.方法名( )
表单验证的思路表单验证的思路-3
演示实现步骤(完整案例 ： 演示实现步骤 完整案例)： 完整案例
1、在登录文本框后插入DIV标签 、在登录文本框后插入 标签loginError （即没有样式的 即没有样式的DIV层） 标签 层 2、修改源代码，设置 的显示方式为inline，即和文本框在同一行 、修改源代码，设置DIV的显示方式为 的显示方式为 ， 获取插入的DIV对象 获取插入的 对象 <div id="loginError" style="display:inline"> </div>
3、添加文本框失去焦点的事件函数： 、添加文本框失去焦点的事件函数： function checkLogin( ){ var myDiv=document.getElementById("loginError"); myDiv.innerHTML=""; var strName=erfrm.loginName.value; if (strName.length == 0) { myDiv.innerHTML="<font color='red'>用户名不能为空 用户名不能为空</font>"; 用户名不能为空 return; 如果输入的信息不合法，则利用DIV的innerHTML或 如果输入的信息不合法，则利用 的 或 } innerText进行错误提示，innerText只能写文本信息 进行错误提示， 进行错误提示 只能写文本信息 } …… <INPUT name="loginName" type="text" onblur="checkLogin( )"> <div id="loginError" style="display:inline"> </div>
T05表单验证技术 与特效
回顾
简述制作样式特效的大致步骤。 简述制作改变按钮背景图片特效的大致步骤。 简述层的显示/隐藏特效的实现思路。 简述图片的显示/隐藏特效的的实现思路。
本章任务
制作具有验证功能的注册页面
演示案例： 演示案例：具有验证功能的注册页面
制作回车切换输入的效果
演示案例： 演示案例：回车切换输入的效果
如何制作即时提示错误的特效？ 如何制作即时提示错误的特效？ 页面效果
制作即时提示错误的特效制作即时提示错误的特效-2
使用DIV层的内容动态改变。 层的内容动态改变。 使用 层的内容动态改变
在每个输入框后添加一个 DIV层, 根据用户的输入 动 层 根据用户的输入, 态显示错误信息
制作即时提示错误的特效制作即时提示错误的特效-3
制作回车切换输入的效果
上述注册页面中，需要给每个文本框添加键盘按下事件， 上述注册页面中，需要给每个文本框添加键盘按下事件， 有没有更简单的办法？ 有没有更简单的办法？ 通过给document对象添加键盘事件。 对象添加键盘事件。 通过给 对象添加键盘事件
制作即时提示错误的特效制作即时提示错误的特效-1
正则表达式正则表达式-2
\d+ :匹配1个或更多连续的数字 \b\w{6}\b: 匹配刚好6个字符的单词 \ba\w*\b ：匹配以字母a开头的单词 电话号码：0710-328717
0\d\d\d-\d\d\d\d\d\d\d d{3}0\d{3}-\d{7} 验证5 12位的QQ号码 验证5-12位的QQ号码 位的QQ 匹配你要用来查找的字符串的开头， ^匹配你要用来查找的字符串的开头，$匹配结尾
用户输入 客户端
IE
用户输入 客户端
……
……
用户输入 客户端
服务器
脚本在客户端执行， 脚本在客户端执行，减轻服务器端的压力
表单验证的内容
不能为空， 不能为空，且只 能包括字母、 能包括字母、数 字和下划线字符 不能为空且 不能有数字 不能为空且 不能有数字
不能为空且包含 字符@和 字符 和.
密码不能为空并且最 少为6位 少为 位，还要求两 次输入的密码要一致
常用的正则表达式
3-16位由字母、数字、下划线、连接符组成的字符： 16位由字母、数字、下划线、连接符组成的字符： 位由字母
/^[a-z0-9_/^[a-z0-9_-]{3,16}$/
Email： Email：
/^([a-z0-9_\ ]+)@([\da/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ ]+)\.([a-
String对象常用的属性和方法
语法： 语法： 属性 length indexOf(“查找的子字符串”，查找的起始位置 获取字符串字符的个数 查找的子字符串” 查找的起始位置) 查找的子字符串 返回子字符串所在的位置；如果没找到， 返回子字符串所在的位置；如果没找到，返回 －1 方法 indexOf(“子字符串”，起始位置) 查找子字符串的位置 例如： 例如： var x 获取位于指定索引位置 charAt(index) var y=“abcdefg”; 的字符 x=y.indexOf(“c” , 0 ); substring(index1,index2 ) 求子串 //返回结果为 ，起始位置是 返回结果为2，起始位置是0 返回结果为
文本框控件文本框控件-2
使用文本框对象的相关方法， 使用文本框对象的相关方法，实现选中效果
文本框对象的常用属性、方法、事件
名 称
属性 方法 value focus( ) select( ) 事件 onFocus onBlur onKeyPress
说 明
设置或获取文本框的值 获得焦点 选中文本内容，突出显示输入区域 光标进入某个文本框脚本运行 文本框失去焦点脚本运行 当一个键按下并释放时去触发一个事件
正则表达式正则表达式-1
正则表达式(regular expression)描述了一种字 符串匹配的模式，可以用来检查一个串是否含有 某种子串、将匹配的子串做替换或者从某个串中 取出符合某个条件的子串等。
正则表达式正则表达式-2
在文章中只查找hi这两个字符，不 分区大小写 him,history,high,Hi,HI,hi？？ Hi,HI,hi？？ Hi,HI,hi 使用正则表达式：\bhi\b \ hi\ 查找hi..ry \bhi\b.*\bry\b hi..ry,则\ hi\b.*\ ry\ hi..ry
^\d{5,12}$
正则表达式正则表达式-3
分枝条件：有几种规则， 分枝条件：有几种规则，如果满足其中任意一种规则都
应该当成匹配
0\d{2}-\d{8}|0\d{3}-\d{7} \(0\d{2}\)[- ]?\d{8}|0\d{2}[- ]?\d{8} 分组条件: (\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配
只能二选一
年月日不能 为空， 为空，且不 能超出其要 求的范围
表单验证的思路表单验证的思路-1
如何编写脚本验证表单？
1、获取表单元素的值（String类型），然后进行判断 、获取表单元素的值（ 类型）， 类型），然后进行判断
2、触发表单（FORM）的提交事件（onSubmit） 、触发表单（ 表单 ）的提交事件（ ）
URL： URL：
/^(https?:\ /)?([\da/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.]+)\.([a- .]{2,6})([\ ]*)*\ ]*)*\/?$/
IP地址： IP地址： 地址
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][09]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][09]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
文本框控件文本框控件-3
使用图片代替提交按钮
为了美观，现把提交按钮变成图片，但仍然保持 表单的验证功能？如何实现？ 1、使用图片的单击事件
)"> <IMG src="images/regquick.jpg" onClick="checkForm( )">
2、因为图片不具备“提交”按钮的提交功能，所
以需要人工调用提交方法－ submit( )
制作回车切换输入的效果
输入完毕后回车，默认会提交表单。 输入完毕后回车，默认会提交表单。 如何制作回车Tab切换效果？ 切换效果？ 如何制作回车 切换效果 页面效果1 页面效果 页面效果2 页面效果
制作回车切换输入的效果
1、 针对控件使用键盘输入事件 、 针对控件使用键盘输入事件onKeyDown事件 事件 2、 检查输入是否是回车键－ASCII码13，若是则将 、 检查输入是否是回车键－ 码 ， 输入改为Tab键－ASCII码9 输入改为 键 码