JS-clientValidator

**********clientvalidator.js************

//*************************************驗正類定義**********************************************
function valControlSec(id,regExp,info,errInfo,sucInfo)
{
 this.validated = 0; 

 this.id = id?id:"";
 this.regExp = regExp?regExp:"";
 this.info = info?info:"";
 this.errInfo = errInfo?errInfo:"";
 this.sucInfo = sucInfo?sucInfo:"";
 
 this.normalColor = "";
 this.rightColor = "";
 this.wrongColor = "";

 this.index = -1;

 this.check = function (){
  curObj = event.srcElement;
  if (typeof(curObj) != Object)
   //alert(this.id);
   curObj = document.getElementById(this.id);
  info_ctrl = document.getElementById(this.id+"_info");
  var curRegExp = new RegExp(this.regExp);
  if (curObj.value != "")
   if (curObj.value.match(curRegExp))
   {
    this.validated = 1; 
    info_ctrl.innerHTML = this.sucInfo;
    info_ctrl.style.color = this.rightColor;
   }
   else
   {
    this.validated = 0; 
    info_ctrl.innerHTML = this.errInfo;
    info_ctrl.style.color = this.wrongColor;
   }
  else
  {
   this.validated = 0; 
   info_ctrl.innerHTML = this.info;
   info_ctrl.style.color = this.normalColor;
  }
 } 

 this.setup = function (){
  var curControl = document.getElementById(this.id);
  curControl.parentElement.innerHTML += "<span id=/""+this.id+"_info/" style=/"font-size:10pt;/">"+this.info+"</span>";
  curControl = document.getElementById(this.id);
  document.getElementById(this.id+"_info").style.color = this.normalColor;
  curControl.attachEvent("onblur",new Function("document.validater.valControlSecs["+this.index+"].check();"));
 }
}

function clientValidate()
{
 this.email = "^//w{4,12}@//w{1,12}/.[a-zA-Z]{2,3}$";
 
 this.normalColor = "#000000";
 this.rightColor = "#00ff00";
 this.wrongColor = "#ff0000";
 this.info = "Type in some data";
 this.errInfo = ":(";
 this.sucInfo = "";
 
 this.valControlSecs = new Array();
 this.addValControlSec = function (valControlSec){
  this.valControlSecs[this.valControlSecs.length] = valControlSec;
  valControlSec.index = this.valControlSecs.length - 1 ;
  with(valControlSec)
  {
   if (normalColor == "" || normalColor == null)
     normalColor = this.normalColor;
   if (rightColor == "" || rightColor == null)
    rightColor = this.rightColor;
   if (wrongColor == "" || wrongColor == null)
    wrongColor = this.wrongColor;
     
   if (errInfo == "" || errInfo == null)
    errInfo = this.errInfo;
   if (info == "" || info == null)
    info = this.info;
   if (sucInfo == "" || sucInfo == null)
    sucInfo = this.sucInfo;
   if (errInfo == this.errInfo && info != this.info)
    errInfo = info;
  
  }
 }
 
 this.setup = function (){
  for(var i=0;i<this.valControlSecs.length;i++)
  {
   this.valControlSecs[i].setup();
  }

  document.forms[0].attachEvent("onsubmit",new Function("return myValidater.validated()"));
 }

 this.validated = function (){
  var isVal = true;
  var curObj = null;
  var info_ctrl = null;
  for(var i=0;i<this.valControlSecs.length;i++)
  {
   this.valControlSecs[i].check();
   if(!this.valControlSecs[i].validated)
   {
    curObj = document.getElementById(this.valControlSecs[i].id);
    info_ctrl = document.getElementById(this.valControlSecs[i].id+"_info");

    if(curObj.value == "")
    {
     info_ctrl.innerHTML = this.valControlSecs[i].info;
     info_ctrl.style.color = this.valControlSecs[i].wrongColor;
    }
      
    isVal = false;
   }
  }
  if (!isVal) alert("表單驗證失敗，請檢查您的輸入內容！");
  return isVal;
 }
}
//*************************************邦定表單************************************************
document.validater = new clientValidate();
var myValidater = document.validater;
    with (myValidater)
 {
  normalColor = "#aaaa00";
  rightColor = "#66ff66";
  wrongColor = "#ff0066";
 }
 var curForm =document.forms[0];
 var curElement = null;
 
 var myValControlSec = null;
 for (var i=0;i<curForm.elements.length;i++)
 {
  curElement = curForm.elements[i];
  if(!curElement.getAttribute("id") && curElement.getAttribute("regExp") != null)
   if(curElement.getAttribute("name"))
    curElement.setAttribute("id",curElement.getAttribute("name"));

  if(curElement.getAttribute("regExp") != null && curElement.getAttribute("id") != null)
  {
   myValControlSec = new valControlSec();
   with (myValControlSec)
   {
    id         = curElement.getAttribute("id");                             //表單元素屬性

    regExp     = curElement.getAttribute("regExp");               //表單元素屬性

    info       = curElement.getAttribute("info"); //表單元素屬性

    errInfo    = curElement.getAttribute("errInfo");//表單元素屬性

    sucInfo    = curElement.getAttribute("sucInfo");//表單元素屬性

    normalColor= curElement.getAttribute("normalColor");
    rightColor = curElement.getAttribute("rightColor");
    wrongColor = curElement.getAttribute("wrongColor");
   }
   if (myValControlSec.regExp.substring(0,1) != "^")
    myValControlSec.regExp = eval("myValidater."+myValControlSec.regExp);

   myValidater.addValControlSec(myValControlSec);
      
  }
      
 }

myValidater.setup();   //執行邦定

**************  用法  *******************

<table width="460" border="0" align="center" cellpadding="4" cellspacing="0" borderColor="#333333" bgcolor="#333333" style="border-collapse: collapse;color:#AC71B3;">
<form action="admin_Login_check.asp" method=post>
  <tr>
   <th bgcolor="#000000">&nbsp;</th>
   <th bgcolor="#000000" style="text-align:left;">後臺管理登陸</th>
    </tr>
  <tr>
    <td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
    </tr>
  <tr>
    <td width="170" align="right" bgcolor="#000000">用戶名:</td>
    <td nowrap="nowrap" bgcolor="#000000">
  <input name="admin_user" type="text" class="admin_input" id="admin_user" maxlength=16
  οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w/-_/.]{4,16}$" info="請輸入4-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
  /> </td>
  </tr>
  <tr>
    <td align="right" bgcolor="#000000">密碼:</td>
    <td bgcolor="#000000">
 <input name="admin_pwd" type="password" class="admin_input" id="admin_pwd" maxlength=16
  οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w/-_/.]{3,16}$" info="請輸入3-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
  />  </tr>
  <tr>
    <td align="right" bgcolor="#000000">驗證碼:</td>
    <td bgcolor="#000000"><input name="checkCode" type="text" id="checkCode"  maxlength="4" size=4  class="checkcode"
  οnmοuseοver="this.style.background='#efefef';" οnmοuseοut="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w]{4}$" info="請輸入左邊的 4 位 字母." normalColor="#aaaaaa"
  />
  <img src="inc/checkcode/checkCode.asp" align="absmiddle"/> </td>
  </tr>
  <tr>
    <td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
  </tr>
  <tr>
    <td bgcolor="#000000">&nbsp;</td>
    <td bgcolor="#000000">
  <input type="submit" name="Submit" value="  登陸  " style="background:#ffffff;" /> </td>
  </tr>
</form>
</table>
<script language="javascript" src="Javascript/clientValidate.js"></script>