////////////////////////////////////////////////////////////////////////////////
/*
 *--------------- 客戶端表單通用驗證checkForm(oForm) -----------------
 * 本程式最初是由wanghr100(灰豆寶寶.net)的checkForm基礎上進行修改的，增加了很多功能,如下：
 * 1.對非ie的支援
 * 2.增加了內建表示式和內建提示
 *  3.增加了顯示方式（彈出式和頁面顯示式）
 * 4.增加了顯示一條和顯示全部
 * 5.進行了封裝（CLASS_CHECK）
 * 6.支援外接函式或表示式（應用在密碼一致）
 * 7.簡化了呼叫方式，所有操作只需要<script language='javascript' src='checkform.js'>,
   然後在HTML裡定義各標籤驗證格式
 * 8.對IE增加了對鍵盤輸入的限制（如：定義usage='int'時，輸入框只能輸入數字（非IE無效）
 * 9.增加了對disabled的不驗證
 * 10.自定義報警方式（重寫showMessageEx方法）

 *-----------------------------申明資訊-----------------------------
 *
 * 作者： ttyp
 * 郵箱： [email protected]
 * 部落格： http://www.cnblogs.com/ttyp/
 *  宣告： 對本程式可以任意複製傳播，但請保留這些宣告，對於內建的表示式有些沒有做到很嚴格，如果你
   有好的建議和意見，歡迎郵件和我聯絡或者上我的部落格留言

 * 簡介：
   本程式只需要對需要驗證的標籤設定三個屬性：usage,exp,tip

   usage : 內建格式或表示式或函式
   exp  : 正則表示式（注意如果指定了usage則忽略exp)
   tip  : 出錯提示（如果是內建格式可以不要此屬性，有預設提示）

   呼叫時只需要引用<script language='javascript' src='checkform.js'>，然後為每個標記
   增加以上3個屬性（不一定需要全部）

 * 原作者: wanghr100(灰豆寶寶.net)
 * email: [email protected]
 *
 *--------------- 客戶端表單通用驗證checkForm(oForm) -----------------
 */
////////////////////////////////////////////////////////////////////////////////

function CLASS_CHECK()
{
 this.pass  = true;  //是否通過驗證
 this.showAll = true;  //是否顯示所有的驗證錯誤
 this.alert  = false; //報警方式（預設alert報警）
 this.message = "";  //錯誤內容
 this.first  = null;  //在顯示全部驗證錯誤時的第一個錯誤控制元件（用於回到焦點）

 //定義內建格式
 var aUsage =
 {
  "int":"^([+-]?)//d+$",           //整數
  "int+":"^([+]?)//d+$",           //正整數
  "int-":"^-//d+$",            //負整數
  "num":"^([+-]?)//d*//.?//d+$",         //數字
  "num+":"^([+]?)//d*//.?//d+$",         //正數
  "num-":"^-//d*//.?//d+$",          //負數
  "float":"^([+-]?)//d*//.//d+$",         //浮點數
  "float+":"^([+]?)//d*//.//d+$",         //正浮點數
  "float-":"^-//d*//.//d+$",          //負浮點數
                  //郵件
  "email":"^//w+((-//w+)|(//.//w+))*//@[A-Za-z0-9]+((//.|-)[A-Za-z0-9]+)*//.[A-Za-z0-9]+$", 
  "color":"^#[a-fA-F0-9]{6}",          //顏色
  "url":"^http[s]?://////([//w-]+//.)+[//w-]+([//w-./?%&=]*)?$", //聯接
  "chinese":"^[//u4E00-//u9FA5//uF900-//uFA2D]+$",    //僅中文
  "ascii":"^[//x00-//xFF]+$",          //僅ACSII字元
  "zipcode":"^//d{6}$",           //郵編
  "mobile":"^0{0,1}13[0-9]{9}$",         //手機
  "ip4":"^//d{1,3}//.//d{1,3}//.//d{1,3}.//d{1,3}$",    //ip地址
  "notempty":"^//S+$",           //非空
  "picture":"(.*)//.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$", //圖片
  "rar":"(.*)//.(rar|zip|7zip|tgz)$",        //壓縮檔案
  "date":"^//d{4}(//-|///|/.)//d{1,2}//1//d{1,2}$"        //日期
 };

 //預設訊息
 var aMessage =
 {
  "int" :"請輸入整數",           //整數
  "int+" :"請輸入正整數",           //正整數
  "int-" :"請輸入負整數",           //負整數
  "num" :"請輸入數字",           //數字
  "num+" :"請輸入正數",           //正數
  "num-" :"請輸入負整數",           //負數
  "float" :"請輸入浮點數",           //浮點數
  "float+":"請輸入正浮點數",          //正浮點數
  "float-":"請輸入負浮點數",          //負浮點數
  "email" :"請輸入正確的郵箱地址",         //郵件
  "color" :"請輸入正確的顏色",          //顏色
  "url" :"請輸入正確的連線地址",         //聯接
  "chinese":"請輸入中文",           //中文
  "ascii" :"請輸入ascii字元",          //僅ACSII字元
  "zipcode":"請輸入正確的郵政編碼",         //郵編
  "mobile":"請輸入正確的手機號碼",         //手機
  "ip4" :"請輸入正確的IP地址",          //ip地址
  "notempty":"不能為空",           //非空
  "picture":"請選擇圖片",           //圖片
  "rar" :"請輸入壓縮檔案",          //壓縮檔案
  "date" :"請輸入正確的日期"          //日期
 }

 var me = this;

 function checkForm(oForm)
 {
  me.pass  = true;
  me.message = "";
  me.first = null;
  var els = oForm.elements;
  //遍歷所有表元素
  for(var i=0;i<els.length;i++)
  {
   //取得格式
   var sUsage = els[i].getAttribute("Usage"); 
   var sReg = "";
   
   //如果設定Usage，則使用內建正則表示式，忽略Exp
   if(typeof(sUsage)!="undefined"&&sUsage!=null)
   {
    //如果Usage在表達室裡找到，則使用內建表示式，無則認為是表示式；表示式可以是函式；
    if(aUsage[sUsage]!=null)
    {   
     sReg = aUsage[sUsage];
    }
    else
    {
     try
     {
      if(eval(sUsage)==false)
      { 
       me.pass  = false;
       if(me.first==null)
       {
        me.first = els[i];
       }

       addMessage(getMessage(els[i]));       

       if(me.showAll==false)
       {
        setFocus(els[i]);
        break;
       }
      }
     }
     catch(e)
     {
      alert("表示式[" + sUsage +"]錯誤:" + e.description)
      return false;
     }
    }
   }
   else
   {   
    sReg = els[i].getAttribute("Exp");
   }

   if(typeof(sReg)!="undefined"&&sReg!=null)
   {
    //對於失效狀態不驗證
    if(isDisabled(els[i])==true)
    {
     continue;
    }

    //取得表單的值,用通用取值函式
    var sVal = getValue(els[i]);
    //字串->正則表示式,不區分大小寫
    var reg = new RegExp(sReg,"i");
    if(!reg.test(sVal))
    {
     me.pass  = false;
     if(me.first==null)
     {
      me.first = els[i];
     }

     //alert(reg);
     //驗證不通過,彈出提示warning
     var sTip = getMessage(els[i]);
     if(sTip.length==0&&typeof(sUsage)!="undefined"&&sUsage!=null&&aMessage[sUsage]!=null)
     {
      sTip = aMessage[sUsage];
     }
     addMessage(sTip);

     if(me.showAll==false)
     {
      //該表單元素取得焦點,用通用返回函式
      setFocus(els[i]);
      break;
     }

    }
   }       
  }

  if(me.pass==false)
  {
   showMessage();

   if(me.first!=null&&me.showAll==true)
   {
    setFocus(me.first);
   }
  }

  return me.pass;
 }

 /*
  * 新增錯誤資訊
  */
 function addMessage(msg)
 {
  if(me.alert==true)
  {
   me.message += msg + "/n";
  }
  else
  {
   me.message += msg + "<br>";
  }
 }

 /*
  * 顯示錯誤
  */
 function getMessage(els)
 {
  var sTip = els.getAttribute("tip");
  if(typeof(sTip)!="undefined"&&sTip!=null)
  {
   return sTip;
  }
  else
  {
   return "";
  }
 }

 /*
  * 顯示錯誤
  */
 function showMessage()
 {
  //外接顯示錯誤函式
  if(typeof(me.showMessageEx)=="function")
  {
   return me.showMessageEx(me.message);
  }

  if(me.alert==true)
  {
   alert(me.message);
  }
  else
  {
   var divTip;
    divTip = document.getElementById("divErrorMessage");
   try
   {
    if(typeof(divTip)=="undefined"||divTip==null)
    {
      divTip = document.createElement("div");
      divTip.id   = "divErrorMessage";
      divTip.name   = "divErrorMessage";
      divTip.style.color = "red";
      document.body.appendChild(divTip);
    }

    divTip.innerHTML = me.message;
   }catch(e){}
  }
 }

 /*
  * 獲得元素是否失效（失效的元素不做判斷）
  */
 function isDisabled(el)
 {
  //對於radio,checkbox元素，只要其中有一個非失效元素就驗證
  if(el.type=="radio"||el.type=="checkbox")
  {
   //取得第一個元素的name,搜尋這個元素組
   var tmpels = document.getElementsByName(el.name);
   for(var i=0;i<tmpels.length;i++)
   {
    if(tmpels[i].disabled==false)
    {
     return false;
    }
   }
   return true;
  }
  else
  {
   return el.disabled;
  }
 }

 /*
  * 取得物件的值（對於單選多選框把其選擇的個數作為需要驗證的值）
  */
 function getValue(el)
 {
  //取得表單元素的型別
  var sType = el.type;
  switch(sType)
  {
   //文字輸入框,直接取值el.value
   case "text":
   case "hidden":
   case "password":
   case "file":
   case "textarea": return el.value;
   //單多下拉選單,遍歷所有選項取得被選中的個數返回結果"0"表示選中一個，"00"表示選中兩個
   case "checkbox":
   case "radio": return getRadioValue(el);
   case "select-one":
   case "select-multiple": return getSelectValue(el);
  }
  //取得radio,checkbox的選中數,用"0"來表示選中的個數,我們寫正則的時候就可以通過0{1,}來表示選中個數
  function getRadioValue(el)
  {
   var sValue = "";
   //取得第一個元素的name,搜尋這個元素組
   var tmpels = document.getElementsByName(el.name);
   for(var i=0;i<tmpels.length;i++)
   {
    if(tmpels[i].checked)
    {
     sValue += "0";
    }
   }
   return sValue;
  }
  //取得select的選中數,用"0"來表示選中的個數,我們寫正則的時候就可以通過0{1,}來表示選中個數
  function getSelectValue(el)
  {
   var sValue = "";
   for(var i=0;i<el.options.length;i++)
   {
    //單選下拉框提示選項設定為value=""
    if(el.options[i].selected && el.options[i].value!="")
    {
     sValue += "0";
    }
   }
   return sValue;
  }
 }

 /*
  * 對沒有通過驗證的元素設定焦點
  */
 function setFocus(el)
 {
  //取得表單元素的型別
  var sType = el.type;
  switch(sType)
  {
   //文字輸入框,游標定位在文字輸入框的末尾
   case "text":
   case "hidden":
   case "password":
   case "file":
   case "textarea":
    try{el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();}catch(e){};
    break;
   
   //單多選,第一選項非失效控制元件取得焦點
   case "checkbox":
   case "radio":
    var els = document.getElementsByName(el.name);
    for(var i=0;i<els.length;i++)
    {
     if(els[i].disabled == false)
     {
      els[i].focus();
      break;
     }
    }
    break;
   case "select-one":
   case "select-multiple":
    el.focus();
    break;
  }
 }

 
 //自動繫結到所有form的onsubmit事件
 if(window.attachEvent)
 {
  window.attachEvent("onload",function(){for(var i=0;i<document.forms.length;i++){var theFrom = document.forms[i]; if(theFrom){theFrom.attachEvent("onsubmit",function(){return checkForm(theFrom);});}}});
 }
 else
 {
  window.onsubmit = function(e){var theFrom = e.target;if(theFrom){return checkForm(theFrom);}}
 }

 this.keyCheck = function()
 {
  if(window.attachEvent)
  {
   window.attachEvent("onload",function(){for(var i=0;i<document.forms.length;i++){var theFrom = document.forms[i]; if(theFrom){myKeyCheck(theFrom);}}});
  }
  else
  {
   //TOOD
  }

  function myKeyCheck(oForm)
  {
   var els = oForm.elements;
   //遍歷所有表元素
   for(var i=0;i<els.length;i++)
   {
    //取得格式
    var sUsage = els[i].getAttribute("Usage"); 
    
    //如果設定Usage，則使用內建正則表示式，忽略Exp
    if(typeof(sUsage)!="undefined"&&sUsage!=null)
    {
     switch(sUsage.toLowerCase ())
     {
      case "zipcode":
      case "int":
       els[i].onkeypress = function(){return //d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('+')<0?String.fromCharCode(event.keyCode)=="+":false)||(this.value.indexOf('-')<0?String.fromCharCode(event.keyCode)=="-":false);}
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "mobile":
      case "int+":
       els[i].onkeypress = function(){return //d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('+')<0?String.fromCharCode(event.keyCode)=="+":false);}
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "int-":
       els[i].onkeypress = function(){return //d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('-')<0?String.fromCharCode(event.keyCode)=="-":false);}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float":
      case "num":
       els[i].onkeypress = function(){return /[/+/-/.]|/d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float+":
      case "num+":
       els[i].onkeypress = function(){return /[/+/.]|/d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "float-":
      case "num-":
       els[i].onkeypress = function(){return /[/-/.]|/d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;
      case "ascii":
       els[i].style.imeMode= "disabled";
       break;
      case "ip4":
       els[i].onkeypress = function(){return /[/.]|/d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       els[i].maxLength = 15;
       break;
      case "color":
       els[i].onkeypress = function(){return /[a-fA-Z]|/d/.test(String.fromCharCode(event.keyCode))||(this.value.indexOf('#')<0?String.fromCharCode(event.keyCode)=="#":false);}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].maxLength = 7;
       els[i].style.imeMode= "disabled";
       break;
      case "date":
       els[i].onkeypress = function(){return /[///-/.]|/d/.test(String.fromCharCode(event.keyCode));}     
       els[i].onpaste  = function(){return !clipboardData.getData('text').match(//D/);}
       els[i].ondragenter = function(){return false;}
       els[i].style.imeMode= "disabled";
       break;       
     }
    }
   }
  }
 }
}

//初始化
var g_check = new CLASS_CHECK();
 g_check.keyCheck();