第四章表单验证技术

第四章 表单验证技术
本节内容

制作随鼠标滚动的浮动广告特效 表单验证的思路 文本框的常用属性与方法 制作表单文本即时提示效果 使用正则表达式进行表单验证
本讲目标

制作随鼠标滚动的浮动广告特效 基本的表单验证 文本框的常用属性与方法 制作表单文本即时提示效果 使用正则表达式进行表单验证
8
查找某个指定的字符串值在字符串中首次出现的位置
-1
返回位于指定索引 index1 和index2之间的字符串，并 且包括索引 index1 对应的字符，不包括索引 index2对
应的字符
文本框内容验证-1
姓名不能为空，并且姓名中不能有数字 密码不能为空，并且密码包含的字符不能少于6个 两次输入的密码必须一致
var user=document.getElementById("user").value;
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1) if(j>=0){ alert("姓名中不能包含数字"); } }
练习－验证贵美网注册页面
文本框内容验证-2
使用String对象的length属性验证密码的长度
var pwd=document.getElementById("pwd").value; if(pwd.length<6){ alert("密码必须等于或大于6个字符"); return false; }
验证两次输入密码是否一致
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
RegExp对象

RegExp对象的方法
方法 描述
检索字符中是正则表达式的区配，返回找到的值，回true或false
String对象

String对象的方法
return false;
}
文本提示特效

如何实现如图所示的文本提示特效？
文本框失去焦点事件onblur 使用innerHTML属性动态改div添中内容
文本提示特效代码

提示Email不能为空
function checkEmail(){ var mail= document.getElementById ("email");
任何非空白字符 匹配前一项至少n次，但是不能超过m次 匹配一个数字字符，等价于[0-9] 匹配前一项0次或多次，等价于{0,} 除了数字之外的任何字符，等价于[^0-9] 匹配前一项1次或多次，等价于{1,} 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W ？ .
任何非单字字符，等价于[^a-zA-z0-9_] 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} 除了换行符之外的任意字符
制作文本框效果-2

当用户输入无效的电子邮件地址， Email 文本框中的 内容将被自动选中并且高亮显示，提示用户重新输入
if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){ alert("Email格式不正确\n必须包含符号@和."); document.getElementById("email").select();
使用 currentStyle 或getComputedStyle() 可以获得层在网页中的 位置，但是如何获取滚动条滚动的距离呢？
scrollTop、scrollLeft属性
属性
scrollTop
scrollLeft
描述
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 离 浏览器中可见内容的高度，不包括滚动条等边线，会随窗口的显示大 小改变 浏览器中可以看到内容的区域的高度
事件
onfocus onkeypress blur()
方法
focus() select()
属性
id value
制作文本框效果-1

清除文本框中初始内容，并设置边框为红色
function clearText(){ var mail=document.getElementById("email"); if(mail.value=="请输入正确的电子邮箱"){ mail.value=""; mail.style.borderColor="#ff0000"; } } …… <td>Email：<input id="email" type="text" class="inputs" value="请输入正确的 电子邮箱" onfocus="clearText()"/></td> </tr>
• 页面加载时，获取图片所在层的具体位置，即页面的left和top位置
• 获取页面初始位置时，要判断当前浏览器的类型，本例只判断是IE还 是fireFox
• 当滚动条滚动时，获取滚动条距离页面顶端和左侧的距离，同时改变
层距离顶端和左侧的位置
随鼠标滚动的广告图片

制作随鼠标滚动的广告图片
层距页面 顶端坐标
t)+"px"; } 层距页面 左侧坐标
window.onload=inix;
window.onscroll=move;
什么需要表单验证

减轻服务器的压力
保证输入的数据符合要求

表单验证的内容

日期是否有效或日期格式是否正确
表单元素是否为空
用户名和密码 E-mail地址是否正确 身份证号码等是否是数字
正则表达式的应用
用户名、密码、电子邮箱、手机号码、身份证号 码、生日、邮政编码、固定电话
验证邮政编码和手机号码
验证邮政编码和手机号码
• 中国的邮政编码都是6位
• 手机号码都是11位，并且第1位都是1 • 邮政编码和手机号码的验证的正则表达式 •var regCode=/^\d{6}$/; •var regMobile=/^1\d{10}$/;
function move(){
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTo p)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLef
var divObj=document.getElementById("test");
var objTop= divObj.currentStyle.top;
var objTop =document.defaultView.getComputedStyle(divObj,null).top;
制作随鼠标滚动的广告图片
构造函数
var reg=new RegExp("表达式","附加参数")
var reg=new RegExp("white"); var reg=new RegExp("white","g");
表达式的模式
简单模式
var reg=/china/; var reg=/abc8/;
复合模式
var reg=/^\w+$/;
var strLength=str.length;
18
String对象

字符串对象的方法
字符串对象.方法名( )
方法 描述
var str="this is JavaScript"; toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写 var selectFirst=str.indexOf("Java"); charAt(index) 返回在指定位置的字符 var selectSecond=str.indexOf("Java",12); indexOf(字符串，index) substring(index1,index 2)
正则表达式

为什么需要正则表达式 简洁的代码 严谨的验证文本框中的内容

什么是正则表达式

正则表达式是一个描述字符模式的对象
定义正则表达式 表达式的模式
定义正则表达式
普通方式
var reg=/表达式/附加参数
var reg=/white/;
var reg=/white/g;
var repwd=document.getElementById("repwd").value; if(pwd!=repwd){
alert("两次输入的密码不一致");
return false; }
文本框内容验证-3

使 用 length 属 性 获 取 文 本 长 度 ， 使 用 for 循 环 和 substring()方法依次截断单个字符，判断每个字符 是否是数字
文本框对象

文本框对象的属性、方法和事件
名称
onblur
类别
描述
失去焦点，当光标离开某个文本框时触发 获得焦点，当光标进入某个文本框时触发 某个键盘按键被按下并松开 从文本域中移开焦点 在文本域中设置焦点，即获得鼠标光标 选取文本域中的内容 设置或返回文本域的id 设置或返回文本域的value属性的值