淘先锋技术网

首页 1 2 3 4 5 6 7

Web 表单验证 javascript

 本javascript 用于验证表单,验证提示///

Power By WeisNet   Xhtmler.Com Beta

转载请注时出处

2006-6-17

1.要验证的页面 Web.htm

 

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    <link href="Css.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
< script  language ="javascript"  type ="text/javascript"  src ="Validate.js?ver=1.0&zWorld" ></ script >
< title > 表单验证 </ title >
</ title >
< body >
< script  language ="javascript"  type ="text/javascript" > ... var WebCheck = new onfocusFunc(); </ script >
< table  cellpadding ="3"  cellspacing ="0"  width ="100%"  style ="margin:16pt auto;"  id ="chkFormTable" >
                    < tr >
                       < td  class ="tdCss_f" >
                       用户名 < span  style ="color:red" > * </ span >
                       </ td >
                       < td  align ="left" >
                        < input  type ="text"  name ="logName"  id ="logName"  runat ="server"  class ="inputCss"   />
                       </ td >
                       < td  class ="tdCss_t"  align ="left" >
                        < div  id ="logName_info" > 2-20个字符(包括字母，数字，下划线)! </ div >
                       </ td >
                    </ tr >
                    <!-- -------------------------- -->
                    < tr >
                       < td  colspan ="3"  class ="splitTD" >

                       </ td >
                    </ tr >
                    <!-- -------------------------- -->
                    < tr >
                       < td  class ="tdCss_f" >
                       登陆密码 < span  style ="color:red" > * </ span >
                       </ td >
                       < td  align ="left" >
                        < input  type ="password"  name ="logPwd"  id ="logPwd"  runat ="server"  class ="inputCss"   />
                       </ td >
                       < td  class ="tdCss_t"  align ="left" >
                        < div  id ="logPwd_info" > 6-20个字符(包括字母，数字，下划线)! </ div >
                       </ td >
                    </ tr >
                    < tr >
                       < td  class ="tdCss_f" >
                        &nbsp; < script  language ="javascript"  type ="text/javascript" > ... var Web=new Main();initForm(); </ script >
                       </ td >
                       < td  align ="left"  colspan ="2" >
                          < input  type ="button"  name ="RegBtn"  id ="RegBtn"  runat ="server"  onclick ="if (!CheckAllform()) return false;"   />
                       </ td >
                    </ tr >
</ table >
</ body >
</ html >

 

2 . validate.js

 

///
///ValidateForm1.0
///Power By WeisNet   Xhtmler.Com
//
var  onfocusFunc  =   function ()  ... {}
var  state  =   false ;
 var  ComDo  =   new  onfocusFunc();
onfocusFunc.prototype.focus  =   ... {
       Onfocus:function(obj)
       ...{
            var idbox = document.all.item(obj);
            var idinfo;
            for (var item in ComDo.Infos)
            ...{
                 if (item==obj)
                  ...{
                      idinfo = ComDo.ReturnSpan(item);
                      idinfo.className = 'focusCss';
                      idinfo.innerHTML = ""+ComDo.Infos[item].b;
                      if (idbox.value.trim()!='')
                      ...{
                          ComDo.vilidBox(idbox,item);
                      } 
                  }
            }
            
       },
       Onkeyup:function(obj)
       ...{
            var idbox = document.all.item(obj);
           // var idinfo = document.all.item(obj+'_info');
            for (var item in ComDo.Infos)
                 ...{
                      if (item==obj)
                      ...{
                               idinfo = ComDo.ReturnSpan(item);
                               idinfo.className = 'focusCss';
                               //idinfo.innerHTML = ""+ComDo.Infos[item].b; 
                               ComDo.vilidBox(idbox,item);
                      }
                 }
            
       },
       Onblur:function(obj)
       ...{
            var idbox = document.all.item(obj);
            var idinfo ;
            if (idbox.value.trim()!='')
            ...{
                 for (var item in ComDo.Infos)
                 ...{
                      if (item==obj)
                      ...{
                               idinfo = ComDo.ReturnSpan(item);
                               idinfo.className = 'blurCss';
                               //idinfo.innerHTML = ""+ComDo.Infos[item].b; 
                      }
                 }
            }
            else ...{
                 for (var item in ComDo.Infos)
                 ...{
                      if (item==obj)
                      ...{
                               idinfo = ComDo.ReturnSpan(item);
                               idinfo.className = 'blurCss';
                               idinfo.innerHTML = ""+ComDo.Infos[item].a; 
                      }
                 }
            }
       }
}

onfocusFunc.prototype.Infos  =   ... {
      logName:...{
              a:"2-20个字符(包括字母，数字，下划线)!",
              b:"请填写用户名!",
              c:"用户名不能为空!",
              d:"logName",
              e:"logName_info",
              f:function() ...{
                     ComDo.vilidBox(ComDo.ReturnTagID('logName'),'logName');
                     return state;
                 }
              },
      logPwd:...{
              a:"6-20个字符(包括字母，数字，下划线)!",
              b:"请填写用户密码!",
              c:"密码不能空!",
              d:"logPwd",
              e:"logPwd_info",
              f:function() ...{
                     ComDo.vilidBox(ComDo.ReturnTagID('logPwd'),'logPwd');
                     return state;
                 }
              }
}

String.prototype.trim  =   function ()
 ... {
     return this.replace(/(^s*)|(s*$)/g,'');
}


var  initForm  =   function ()
 ... {
    var tbl = document.getElementById("chkFormTable");
    var inputBox = tbl.getElementsByTagName("INPUT");
    for (var i=0;i<inputBox.length;i++)
    ...{
         if (inputBox[i].type=='text' || inputBox[i].type=='password')
         ...{
              inputBox[i].onfocus = doFocus;
              inputBox[i].onkeyup = doKeyup;
              inputBox[i].onblur = doBlur;
         }
    }
}

var  doFocus  =   function ()     // evnt.target Navigator
... {
       var obj = event.srcElement;
       ComDo.focus.Onfocus(ComDo.Infos[obj.id].d);
}

var  doKeyup  =   function ()
 ... {
       var obj = event.srcElement;
       ComDo.focus.Onkeyup(ComDo.Infos[obj.id].d);
}

var  doBlur  =   function ()
 ... {
       var obj = event.srcElement;
       ComDo.focus.Onblur(ComDo.Infos[obj.id].d);
}

// 返回spn showInfo Of the box Validate
onfocusFunc.prototype.ReturnSpan  =   function (item)
 ... {
     return document.all.item(ComDo.Infos[item].e);
}

onfocusFunc.prototype.ReturnTagID  =   function (item)
 ... {
     return document.all.item(ComDo.Infos[item].d);
}

// 验证方法
onfocusFunc.prototype.vilidBox  =   function (idbox,item)
 ... {
      idbox.value = idbox.value.trim();
      var spn = ComDo.ReturnSpan(item);
      switch (ComDo.Infos[item].d)
      ...{
            case "logName":
               chkLogName(idbox,spn,item);
               break;
            case "logPwd":
               chkLogPwdf(idbox,spn,item);
               break;
            default:
               break;
      }
}

function  checkByteLength(str,minlen,maxlen)  ... {
    if (str == null) return false;
    var l = str.length;
    var blen = 0;
    for(i=0; i<l; i++) ...{
        if ((str.charCodeAt(i) & 0xff00) != 0) ...{
            blen ++;
        }
        blen ++;
    }
    if (blen > maxlen || blen < minlen) ...{
        return false;
    }
    return true;
}

// 验证表单
function  chkLogName(obj,spn,item)
 ... {
      if (!checkByteLength(obj.value.trim(),2,20))
      ...{
            spn.className = 'errCss';
            spn.innerHTML = ComDo.Infos[item].a; 
            state = false;
      }
      else 
      ...{
            spn.className = 'focusCss';
            spn.innerHTML = '输入正确';
            state = true; 
      }
}

function  chkLogPwdf(obj,spn,item)
 ... {
      var fpwd = document.all.item('chkLogPwd');
      fpwd.value = '';
      if (!checkByteLength(obj.value.trim(),6,20))
      ...{
            spn.className = 'errCss';
            spn.innerHTML = ComDo.Infos[item].a; 
            state = false;
      }
      else 
      ...{
            spn.className = 'focusCss';
            spn.innerHTML = '输入正确'; 
            state = true;
      }
}

function  chkChkLogPwd(obj,spn,item)
 ... {
      if (!checkByteLength(obj.value.trim(),6,20))
      ...{
            spn.className = 'errCss';
            spn.innerHTML = ComDo.Infos[item].a; 
            state = false;
      }
      else 
      ...{
            var fpwd = document.all.item('logPwd');
            if (fpwd.value.trim()!=obj.value.trim())
            ...{
                  spn.className = 'errCss';
                  spn.innerHTML = ComDo.Infos[item].c; 
                  state = false; 
            }
            else
            ...{
                  spn.className = 'focusCss';
                  spn.innerHTML = '输入正确'; 
                  state = true;
            }
      }
}

function  chkLogEmail(obj,spn,item)
 ... {
      if (!checkByteLength(obj.value.trim(),6,20))
      ...{
            spn.className = 'errCss';
            spn.innerHTML = ComDo.Infos[item].a; 
            state = false;
      }
      else 
      ...{
            var RegMail = /^[_a-zA-Z0-9-]+(.[_a-zA-Z0-9-]*)*@[a-zA-Z0-9-]+([.][a-zA-Z0-9-]+)+$/;
            if (!RegMail.test(obj.value.trim()))
            ...{
                 spn.className = 'errCss';
                 spn.innerHTML = ComDo.Infos[item].c;  
                 state = false;
            }
            else
            ...{
                 spn.className = 'focusCss';
                 spn.innerHTML = '输入正确'; 
                 state = true;
            }
      }
}

function  chkChkCode(obj,spn,item)
 ... {
      if (obj.value.trim()=='')
      ...{
            spn.className = 'errCss';
            spn.innerHTML = ComDo.Infos[item].a; 
            state = false;
      }
      else 
      ...{
            var SecReg = /^d...{6}$/gi;
            if (!SecReg.test(obj.value.trim()))
            ...{
                 spn.className = 'errCss';
                 spn.innerHTML = ComDo.Infos[item].c;  
                 state = false;
            }
            else
            ...{
                 spn.className = 'focusCss';
                 spn.innerHTML = '输入正确'; 
                 state = true
            }
      }
}


// 验证所在表单控件方法
onfocusFunc.prototype.CheckAllform  =   function ()
 ... {
    state = false;
    var tbl = document.getElementById("chkFormTable");
    var inputBox = tbl.getElementsByTagName("INPUT");
    for (var i=0;i<inputBox.length;i++)
    ...{
         if (inputBox[i].type=='text' || inputBox[i].type=='password')
         ...{
               ComDo.vilidBox(inputBox[i],inputBox[i].id);
         }
    }
    for (var k in ComDo.Infos)
    ...{ 
          if (ComDo.Infos[k].f()==false)
          ...{
                return false;
          }
    }
    return true;
}

 

3. css文件 css.css

 

body  {...} {
}

.focusCss  {...} {width:356px;height:24px;border:1px solid green;padding-Left:4pt;line-Height:24px;}
.blurCss  {...} {width:356px;height:24px;border:0px solid green;padding-Left:4pt;line-Height:24px;}
.errCss  {...} {width:356px;height:24px;border:1px solid red;padding-Left:4pt;line-Height:24px;color:Red;}