Web 表單驗證 javascript

fx_blog發表於2007-03-27
WebJavaScript

 ////////////////////本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" 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;}

相關文章