经典的表单验证效果

验证功能如下:<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

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.返回值的使用

 1 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代码如下:

 1 <! 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 < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
 5 < title > 表单验证实例 </ title >
 6 < script  language ="javascript"  src ="checkform.js" ></ script >
 7 < style >
 8body {}{ text-align:center; font-size:14px;}
 9table {}{border:1px solid #CCCCCC;width:80%; text-align:left;}
10input {}{ line-height:20px; border:1px solid #000000;}
11td {}{ 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 < script  language ="javascript" >
16function 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 >

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

转载于:https://www.cnblogs.com/nyxuwen/archive/2006/12/11/589309.html