经典的表单验证效果

验证功能如下:

1. 当表单输入元素在获得焦点时出现信息提示

2. 当表单输入元素在失去焦点时进行验证

3. 表单提交时进行整个表单的验证.

验证效果如下:

    1. 获得焦点的状态
  2. 失去焦点验证失败的样式

    3. 失去焦点验证成功的样式

    4.   没有输入内容直接单击提交按钮时进行验证的状态

其中包含了两个源文件,一个是checkform.js文件,一个包含了表单html文件

里面有几个重点吧.不过对高手来说是小事一桩了.
1.getElementById
var obj=document.getElementById(_obj.id);
var info=document.getElementById(_obj.id+"info");
获得验证的表单元素,传递的时候使用this,接收过来的自然就是对象了.

2.正则表达式
  自已找合适的啦.择日会贴些常用的与大家分享
3.info.innerHTML = "xxxx"
向指定的结点中插入验证状态信息
4.info.style.color = 'blue';
改变指定的样式,如果指定样式的话就使用info.className = "";
5.返回值的使用

function checkform(frm){
2

var refalg=false;
3

var f1,f2,f3,f4,f5;
4

f1 = isEmpty(frm.UserName,1)
5

f2 = isEmail(frm.Email,1,1)
6

f3 = isEmail(frm.reEmail,0,1)
7

f4 = isPostCode(frm.PostCode,1)
8

f5 = isPhone(frm.Tell,1)
9 refalg = f1 && f2 && f3 && f4 && f5
10

alert(refalg)
11

return refalg;
12

}

js文件代码如下:

验证要求：在表单的失去焦点事件和表单提交时进行验证

表单说明：在表单的旁边应有一个元素存储提示信息，命名为表单元素名+info,同时为验证表单元素指定ID

函数说明：接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中

验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理

4.反馈处理结果到指定表单旁的区域中.*/

//验证是否为空

function isEmpty(_obj,flag){

var obj = document.getElementById(_obj.id);

var info = document.getElementById(_obj.id+"info");

if(flag){

if(obj.value.length == 0){

showInfo(info,"请输入表单的内容","red")

return false;}

else{

showInfo(info,"√","green")

return true;}

}

else{

showInfo(info,"您的表单内容不能为空","blue")

return false;

}

//验证邮编,内容非必填字段,如果填写则进行验证

function isPostCode(_obj,flag){

var obj = document.getElementById(_obj.id);

var info = document.getElementById(_obj.id+"Info");

var reg = /^\d{6}$/;

if(flag){

if(obj.value.length>0){

if(reg.test(obj.value)==false){

showInfo(info,"请输入6位数字为合法的邮政编码格式!","red")

return false;}

else{

showInfo(info,"√","green")

return true;}

}

else{

showInfo(info,"邮编为可选填的内容","black")

return true;}

}

else{

showInfo(info,"邮编的格式为6位数字","blue")

}

//验证电子邮件

//参数:Email表单元素ID,是否有必填,表单状态

function isEmail(_obj,isempty,flag){

var obj = document.getElementById(_obj.id);

var info = document.getElementById(_obj.id+"info");

var reg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

if (flag){

if(isempty){

if(obj.value == ""){

showInfo(info,"电子邮件不能为空","red")

return false; }

if (reg.test(obj.value)==false){

showInfo(info,"电子邮件格式不正确","red")

return false;}

else{

showInfo(info,"√","green")

return true;}

}

else{

if (obj.value.length>0){

if (reg.test(obj.value)==false){

showInfo(info,"电子邮件格式不正确","red")

return false;}

else{

showInfo(info,"√","green")

return true; }

}

else{

showInfo(info,"如果填写则进行格式验证","black")

return true; }

}

else{

showInfo(info,"电子邮件可以取回密码","blue") }

}

//电话验证:非必填内容

function isPhone(_obj,flag){

var obj=document.getElementById(_obj.id);

var info=document.getElementById(_obj.id+"info");

var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^$[0-9]{3,4}$[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;

if(flag){

if(obj.value.length>0){

if(reg.test(obj.value)==false){

showInfo(info,"电话格式不正确","red")

return false; }

else{

showInfo(info,"√","green")

return true;

}

else{

showInfo(info,"如填写则进行格式验证","black")

return true;

}

else{

showInfo(info,"如填写则进行格式验证","blue")

}

//显示信息

function showInfo(_info,msg,color){

var info=_info;

info.innerHTML = msg;

info.style.color=color;

}

HTML代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
3

<head>
4

<title>表单验证实例</title>
6

<style>
8

body { text-align:center; font-size:14px;}
9

table {border:1px solid #CCCCCC;width:80%; text-align:left;}
10

input { line-height:20px; border:1px solid #000000;}
11

td { height:20px; padding:4px;}
12

.right{ text-align:right;}
13

.title{ font-size:14px; background-color:#CCCCCC; font-weight:bold; height:20px;}
14

</style>
15

function checkform(frm){
17

var refalg=false;
18

var f1,f2,f3,f4,f5;
19

f1 = isEmpty(frm.UserName,1)
20

f2 = isEmail(frm.Email,1,1)
21

f3 = isEmail(frm.reEmail,0,1)
22

f4 = isPostCode(frm.PostCode,1)
23

f5 = isPhone(frm.Tell,1)
24

refalg = f1 && f2 && f3 && f4 && f5
25

alert(refalg)
26

return refalg;
27

}
28

</script>
29

</head>
30

<body>
31

<form id="form1" name="form1" method="post" onsubmit="return checkform(this)" action="http://www.91160.com/">
32

<table>
33

<tr align="center"><td colspan="3" class="title">表单验证示例</td></tr>
34

<tr><td width="15%">用户名</td><td width="30%">
35

<input type="text" name="UserName" id="UserName" onfocus="isEmpty(this,0)" onblur="isEmpty(this,1)" /></td>
36

<td id="UserNameInfo">验证用户名不能空值</td>
37

</tr>
38

<tr><td>电子邮件</td><td><input type="text" name="Email" id="Email" onfocus="isEmail(this,1,0)" onblur="isEmail(this,1,1)"/></td>
39

<td id="EmailInfo">对电子邮件进行非空和格式验证</td>
40

</tr>
41

<tr><td>备用邮件</td><td><input type="text" name="reEmail" id="reEmail" onfocus="isEmail(this,0,0)" onblur="isEmail(this,0,1)"/></td>
42

<td id="reEmailInfo">如果填写则进行格式验证</td>
43

</tr>
44

<tr><td>邮编</td><td><input type="text" name="PostCode" id="PostCode" onfocus="isPostCode(this,0)" onblur="isPostCode(this,1)" /></td>
45

<td id="PostCodeInfo">邮编如果填写则进行验证</td>
46

</tr>
47

<tr><td>电话</td><td><input type="text" name="Tell" id="Tell" onfocus="isPhone(this,0)" onblur="isPhone(this,1)" /></td>
48

<td id="TellInfo">如填写则进行格式验证</td>
49

</tr>
50

<tr>
51

<td colspan="3" class="right">
52

<input type="submit" name="Submit" value="提交" />
53

<input type="reset" name="canter" value="重置" /></td></tr>
54

</table>
55

</form>
56

</body></html>

代码感觉太长了,又不知道如何插入附件,只能是这样子了,供大家参考和改进

posted @ 2006-12-11 22:14 许文阅读(13447) 评论(12) 编辑收藏举报

淡泊明志，宁静致远

程序爱好者

经典的表单验证效果