註冊頁面的js驗證

程序效果地址：http://product.e-works.net.cn/CompanyRegister.aspx

js 代碼如下：

// 回調返回的消息
var CALLBACK_MESSAGE_CAN = '可以' ;     // 正常的
var CALLBACK_MESSAGE_NOT = '不可以' ;        // 文件未找到

 //消除前後空格和多餘的回車換行
function KindTrim(str)
{
 str = str.replace(/^/s+|/s+$/g, "");
 str = str.replace(/[/r/n]+/g, "/r/n");
 return str;
}
//返回對象  
function $(o)
{
 return document.getElementById(o);
}

// 函數說明 ： 檢測廠商名 [ 驗證廠商名是否可以註冊 ]
function CheckCompanyName()
{
 var vrUser = $('tboxCompanyName');  
 var vrUserDiv = $('nameDiv') ; 
 var userName = KindTrim(vrUser.value) ;    
 if (userName.length <= 0)
 {     
  DecorateTagCss(vrUserDiv,'error','廠商名不能爲空。') ;  
  return false;
 }
 else if(userName.length >50)
 {  
  DecorateTagCss(vrUserDiv,'error','廠商名稱不能超過50個字符.') ;  
  return false;
 }
 else
 {       
    DecorateTagCss(vrUserDiv,'decorate','系統正在檢測您的廠商名，請稍後...') ;    
    SendRequest("GET","AjaxServer/RegisterInfoCheck.aspx?CompanyName="+escape(userName),null,UserNameCallbackHandler) ; 
 }
}

// 函數說明 ： 處理服務器回傳消息  [ 驗證用戶名是否可以註冊 ]
function UserNameCallbackHandler()
{
     var responseText = null ;
  if (xmlHttp.readyState == ready_state_complete)
  {
        if (xmlHttp.status == http_status_complete)
        {    
            responseText = xmlHttp.responseText ;
   if( responseText == CALLBACK_MESSAGE_CAN)
   {
       $('nameDiv').className = 'ok' ;
    $('nameDiv').innerHTML = "該廠商名可以註冊。";   
   }
   else
   {
       $('nameDiv').className = 'error' ;
    $('nameDiv').innerHTML = "該廠商名已經有人註冊。";
   }  
        }
        else
        {
           // alert("頁面有異常。");
        }
    }
}

 

// 處理鎖定焦點的操作
function HandleOnFocusEvent(objId)
{
   var obj = $(objId) ;
   if (obj)
   {
        // 去掉
        var keys = document.getElementsByTagName('div') ;       
        if (keys)
        {
           for ( var i = 0; i < keys.length; i++)
           {
               var key = keys[i] ;
               // 排除掉用戶和email的div
               var valideDiv = (key.id.toLowerCase().indexOf('div') > 0) && (key.id.toLowerCase() != 'namediv')  ;
               valideDiv = valideDiv && (key.id.toLowerCase() != 'vrAnswerDiv')  ;
               if (valideDiv)
               {                
                  if (key.className == 'decorate') 
                     key.className = 'commonText' ;
               }
           }
        }       
        obj.className = 'decorate' ;
   }
}
// 處理喪失焦點時的操作 參數 : 輸入框id 顯示框id
// 要處理的對象包括：密碼 真實姓名 出生年月  手機 電子Email
function HandleOnBlurEvent(tbxId,divId)
{
   var tbxObj = $(tbxId) ;
   var divObj = $(divId) ;  
   if (tbxObj && divObj)
   {
        var keyId = tbxObj.id ; //
        var keyValue = KindTrim(tbxObj.value)
        if(keyId=='tboxProductIntro')
        {
         if(keyValue=="")
         {
                DecorateTagCss(divObj,'error','主營產品說明不能爲空。') ;       
    return false;
      }
  }
     else
     {
       DecorateTagCss(divObj,'ok','填寫正確。') ;  
     }
 }
  
  if(keyId=='tboxWebSite')
        {
         if(keyValue=="")
          {
           DecorateTagCss(divObj,'error','廠商網址不能爲空。') ;       
    return false;
    }
     if (keyValue.length >50)   //  檢測是否填寫了廠商介紹
     {
         DecorateTagCss(divObj,'error','廠商網址不能超過50個字符。') ;                   return false;                
     }
     else
  {
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
  }
 } 
  if(keyId=='ddlCompanyType')
        {
          if (KindTrim(tbxObj.options[tbxObj.selectedIndex].value) == "0")
          {
           DecorateTagCss(divObj,'error','請選擇廠商類別。') ;       
    return false;
    }
    else
  {
    DecorateTagCss(divObj,'ok','填寫正確。') ; 
  }
   
 }
  if(keyId=='ddlCompanyCountry')
        {
          if (KindTrim(tbxObj.options[tbxObj.selectedIndex].value) == "0")
          {
           DecorateTagCss(divObj,'error','請選擇廠商國別。') ;       
    return false;
    }
    else
  {
    DecorateTagCss(divObj,'ok','填寫正確。') ; 
  }
   
 }
  if(keyId=='ddlCompanyField')
        {
          if (KindTrim(tbxObj.options[tbxObj.selectedIndex].value) == "0")
          {
           DecorateTagCss(divObj,'error','請選擇廠商領域。') ;       
    return false;
    }
    else
  {
    DecorateTagCss(divObj,'ok','填寫正確。') ;  
  }
   
 }
  if(keyId=='city')
        {
          if (KindTrim(tbxObj.options[tbxObj.selectedIndex].value) == "")
          {
           DecorateTagCss(divObj,'error','請選擇所在城市。') ;       
    return false;
    }
    else
  {
    DecorateTagCss(divObj,'ok','填寫正確。') ; 
  }
   
 } 
  if(keyId=='tboxAdress')
        {
          if (keyValue=="")
          {
           DecorateTagCss(divObj,'error','廠商地址不能爲空。') ;       
    return false;
    }
    else
  {
    DecorateTagCss(divObj,'ok','填寫正確。') ; 
  }
   
 }
  if(keyId=='tboxlinkName')
        {
          if (keyValue=="")
          {
           DecorateTagCss(divObj,'error','請填寫聯繫人的姓名。') ;       
    return false;
    }
    else
  {
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
  }
   
 } 
  if(keyId=='tboxPhone')
        {
          if (keyValue=="")
         {
           DecorateTagCss(divObj,'error','電話不能爲空。') ;       
   return false;
   }
      if(!checkPhone(keyValue))
  {     
  DecorateTagCss(divObj,'error','電話格式不正確,請填寫區號，且區號和其他部分請用"-"隔開。') ;       
        return false;       
  }
  
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
  
 }
  if(keyId=='tboxFax')
        {
          if (keyValue=="")
          {
           DecorateTagCss(divObj,'error','傳真不能爲空。') ;       
    return false;
    }
     else if(!checkPhone(keyValue))
  {     
    DecorateTagCss(divObj,'error','傳真格式不正確,請填寫區號，且區號和其他部分請用"-"隔開。') ;       
    return false;       
  }
  
   DecorateTagCss(divObj,'ok','填寫正確。') ; 
  
 } 
  if(keyId=='tboxEmail')
        {
          if (keyValue=="")
          {
           DecorateTagCss(divObj,'error','電子郵件不能爲空。') ;       
    return false;
    }
     else if(!checkMail(keyValue))
  {     
  DecorateTagCss(divObj,'error','電子郵件格式不正確,請重新輸入。') ;      
  return false;       
  }
  
   DecorateTagCss(divObj,'ok','填寫正確。') ; ;
  
 }
  if(keyId=='tbUserName')
        {
          if (keyValue=="")
          {
           DecorateTagCss(divObj,'error','登陸帳號不能爲空。') ;       
    return false;
    }
    else if (keyValue.length > 20)
  {  
   DecorateTagCss(divObj,'error','登陸帳號不能超過20個字符。') ;
   return false;
  } 
  
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
  
 }
  if(keyId=='tbPassWord')
        {
          if (keyValue=="")
  {    
      DecorateTagCss(divObj,'error','登錄密碼不能爲空，長度必須在6-12位之間') ;
   return false;  
  }
    else if (keyValue.length > 12)
  {  
   DecorateTagCss(divObj,'error','登錄密碼不能爲空，長度必須在6-12位之間') ;
   return false;
  }
  
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
   
 }
  if(keyId=='tbQuestion')
        {
          if (keyValue=="")
  {    
      DecorateTagCss(divObj,'error','密碼保護問題不能爲空。') ;
   return false;  
  }
    else if (keyValue.length > 20)
  {  
   DecorateTagCss(divObj,'error','密碼保護問題不能超過20個字符。') ;
   return false;
  }
  
   DecorateTagCss(divObj,'ok','填寫正確。') ;  
   
 }
  if(keyId=='tbAnswer')
        {
          if (keyValue=="")
  {    
      DecorateTagCss(divObj,'error','密碼保護問題不能爲空。') ;
   return false;  
  }
    else if (keyValue.length > 20)
  {  
   DecorateTagCss(divObj,'error','密碼保護問題不能超過20個字符。') ;
   return false;
  }
  
    DecorateTagCss(divObj,'ok','填寫正確。') ; 
   
 }              
        
   
   }
}

// 檢測區域內的checkbox
function CheckRegionalInput(parentDiv,tagName,type)
{
  //  alert('開始檢測');
    //當前節點
    var parentNode = document.getElementById(parentDiv);   
    var inputArray = parentNode.getElementsByTagName(tagName) ;

    var flag = false ;
    // 集合數量
    var length = inputArray.length ;                
    for(var i = 0; i < length; i++)
    {
  if(inputArray.item(i).type == type)  //爲構選框
  {
   if(inputArray.item(i).checked)
   {
    flag = true ;
    break ;
   } 
  }
    } 
 return flag ;                
}

// 計算區域內checkbox選中的Value序列
function GetRegionalInputCheckdListText(parentDiv,tagName,type)
{
    //當前節點
    var parentNode = document.getElementById(parentDiv);   
    var inputArray = parentNode.getElementsByTagName(tagName) ;

    var valueList = '' ;
    // 集合數量
    var length = inputArray.length ;                
    for(var i = 0; i < length; i++)
    {
  if(inputArray.item(i).type == type)  //爲構選框
  {
   if(inputArray.item(i).checked)
   {
    valueList += inputArray.item(i).title + "," ;        
   } 
  }
    } 
    valueList = KindTrim(valueList) ;   
    if (valueList.length > 0 && valueList.lastIndexOf(',') > 0)
    {      
       valueList = valueList.substr(0,valueList.length-1) ;
    }
 return valueList ;                
}

//裝飾標籤  給節點加上樣式表值和文字
function DecorateTagCss(obj,cssName,innerHtml)
{
   if (obj)
   {
      obj.className = cssName ;
      obj.innerHTML = innerHtml ;
   }
}
function checkPhone(phone)
{
//國家代碼(2到3位)-區號(2到3位)-電話號碼(7到8位)-分機號(3位)"

var pattern =/^(([0/+]/d{2,3}-)?(0/d{2,3})-)?(/d{7,8})(-(/d{3,}))?$/;
//var pattern =/(^[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(phone!="")
     {
         if(!pattern.test(phone))
         {
           return false;
           }
         else
         return true;
     }
}
function checkMail(str)
{
    var mailArray;  
    var patterns =/^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/; 
    mailArray=str.split(",");
    for(i=0;i<mailArray.length;i++)
    {
        if(patterns.test(mailArray[i]))//郵件地址符合
        {
            return true;
        }
        else   //郵件地址不符合
        {   
            return false;
        }
    }
}

function CheckForm()
{
  //廠商名稱檢查
 var vrUser = $('tboxCompanyName');  
 var vrUserDiv = $('nameDiv') ;   
 var userName = KindTrim(vrUser.value) ;    
 if (userName.length <= 0)
 {  
  DecorateTagCss(vrUserDiv,'error','廠商名稱不能爲空.') ;  
  return false;
 }
 
 //產品介紹
 var ProductIntro = $('tboxProductIntro') ;
 var vrproductDiv = $('ProductIntroDiv') ; 
 var productValue = KindTrim(ProductIntro.value) ;
 
 if (productValue.length == 0)
 {       
  DecorateTagCss(vrproductDiv,'error','主營產品說明不能爲空。') ;        
  return false;
 }
 if (productValue.length >300)
 {       
  DecorateTagCss(vrproductDiv,'error','主營產品說明不能超過300個字符。') ;        
  return false;
 }     

   //廠商網址檢測
   var vrWebSite = $('tboxWebSite') ;
   var WebSiteDiv = $('WebSiteDiv') ;
   var WebSite = KindTrim(vrWebSite.value) ;
   if (WebSite.length <= 0)
   {
      DecorateTagCss(WebSiteDiv,'error','廠商網址不能爲空。') ;       
   return false; 
   }
    if (WebSite.length>50)   //  檢測是否填寫了廠商介紹
     {
         DecorateTagCss(WebSiteDiv,'error','廠商網址不能超過50個字符。') ;                     
   return false;                
     }

  //廠商介紹 
//     var CompanyIntro = $('tboxCompanyIntro') ;     
//  var vrCompanyIntro = $('CompanyIntroDiv') ;
//     if (KindTrim(CompanyIntro.value).length >300)   //  檢測是否填寫了廠商介紹
//     {
//         DecorateTagCss(vrCompanyIntro,'error','廠商介紹不能超過300個字符。') ;                     
//   return false;                
//     }
       //廠商類型
     //var ComapnyLevel =  $('rblComapnyLevel') ; //廠商類型 *  
    // var ComapnyLeveDiv = $('ComapnyLeveDiv') ;
   //if (KindTrim(ComapnyLevel.options[ComapnyLevel.selectedIndex].value) == "0")
    //{     
   //  DecorateTagCss(ComapnyLeveDiv,'error','請選擇您所在的行業。') ;       
   //        return false;
   // }  
   
       //廠商類別
     var CompanyType =  $('ddlCompanyType') ; //廠商類別  
     var vrCompanyTypeDiv = $('CompanyTypeDiv') ;
   if (KindTrim(CompanyType.options[CompanyType.selectedIndex].value) == "0")
    {     
     DecorateTagCss(vrCompanyTypeDiv,'error','請選擇廠商類別。') ;       
           return false;
    }
    
         //廠商國別
     var CompanyCountry =  $('ddlCompanyCountry') ; //廠商國別 *  
     var vrCompanyCountryDiv = $('CompanyCountryDiv') ;
   if (KindTrim(CompanyCountry.options[CompanyCountry.selectedIndex].value) == "0")
    {     
     DecorateTagCss(vrCompanyCountryDiv,'error','請選擇廠商國別。') ;       
           return false;
    } 
      
       //廠商的領域
     var CompanyField =  $('ddlCompanyField') ; //廠商的領域 *  
     var vrCompanyFieldDiv = $('CompanyFieldDiv') ;
   if (KindTrim(CompanyField.options[CompanyField.selectedIndex].value) == "0")
    {     
     DecorateTagCss(vrCompanyFieldDiv,'error','請選擇廠商領域。') ;       
           return false;
    } 
    
       //所在城市
     var city =  $('city') ; //所在城市   
     var vrcityDiv = $('CityDiv') ;
   if (KindTrim(city.options[city.selectedIndex].value) == "")
    {     
     DecorateTagCss(vrcityDiv,'error','所在城市。') ;       
           return false;
    }
       //廠商地址 
     var Adress = $('tboxAdress') ;     
  var vrAdress = $('AdressDiv') ;
     if (KindTrim(Adress.value).length == 0)   //  檢測是否填寫了廠商介紹
     {
         DecorateTagCss(vrAdress,'error','廠商地址不能爲空。') ;                     
   return false;                
     }
       //聯繫人
     var linkName = $('tboxlinkName') ;     
  var vrlinkName = $('linkNameDiv') ;
     if (KindTrim(linkName.value).length == 0)   //  檢測是否填寫了廠商介紹
     {
         DecorateTagCss(vrlinkName,'error','請填寫聯繫人的姓名。') ;                     
   return false;                
     }
        //電話號碼
        var re = /^(-|/+)?/d+(/./d+)?$/ ;
     var vrTelephone = $('tboxPhone') ;    
  var vrPhoneDiv = $('PhoneDiv') ;
         if (KindTrim(vrTelephone.value).length == 0)   //  檢測是否填寫了電話
     {
         DecorateTagCss(vrPhoneDiv,'error','電話不能爲空。') ;                     
   return false;                
     }
     else if(!checkPhone(vrTelephone.value))
  {     
    DecorateTagCss(vrPhoneDiv,'error','電話格式不正確,請填寫區號，且區號和其他部分請用"-"隔開。') ;       
    return false;       
  }
   //傳真
     var vrFax = $('tboxFax') ;    
  var vrFaxDiv = $('FaxDiv') ;
         if (KindTrim(vrFax.value).length == 0)   //  檢測是否填寫了電話
     {
         DecorateTagCss(vrFaxDiv,'error','傳真不能爲空。') ;                     
   return false;                
     }
      else if(!checkPhone(vrFax.value))
  {     
    DecorateTagCss(vrFaxDiv,'error','傳真格式不正確,請填寫區號，且區號和其他部分請用"-"隔開。') ;       
    return false;       
  }
  

        //email檢測
     var vrEmail = $('tboxEmail') ;
     var vrEmailDiv = $('EmailDiv') ;
  var emailValue = KindTrim(vrEmail.value) ;
//  var rStr = new RegExp("[^a-z,0-9,_,--,@,/.]", "ig");
//  var isEmail = (!emailValue.match(rStr)) && (emailValue.length > 5) && (emailValue.indexOf('@') > 0) && (emailValue.indexOf('.') > 0) ;
 
  if (emailValue.length <= 0)
  {    
      DecorateTagCss(vrEmailDiv,'error','電子郵件不能爲空。') ;
   return false;  
  }
  else if (!checkMail(emailValue))
  {  
   DecorateTagCss(vrEmailDiv,'error','電子郵件格式不正確,請重新輸入。') ;
   return false;
  } 
 
     //用戶名檢測
     var vrUserName = $('tbUserName') ;
     var vrUserNameDiv = $('UserNameDiv') ;
  var UserNameValue = KindTrim(vrUserName.value) ;
  
  if (UserNameValue.length <= 0)
  {    
      DecorateTagCss(vrUserNameDiv,'error','登陸帳號不能爲空。') ;
   return false;  
  }
  else if (UserNameValue.length > 20)
  {  
   DecorateTagCss(vrUserNameDiv,'error','登陸帳號不能超過20個字符。') ;
   return false;
  } 
    
     //密碼檢測
     var vrPassWord = $('tbPassWord') ;
     var vrPassWordDiv = $('PassWordDiv') ;
  var PassWordvalue = KindTrim(vrPassWord.value) ;
  
  if (PassWordvalue.length < 6)
  {    
      DecorateTagCss(vrPassWordDiv,'error','登錄密碼不能爲空，長度必須在6-12位之間') ;
   return false;  
  }
  else if (PassWordvalue.length > 12)
  {  
   DecorateTagCss(vrPassWordDiv,'error','登錄密碼不能爲空，長度必須在6-12位之間') ;
   return false;
  } 
  
     //密碼保護問題檢測
     var vrQuestion = $('tbQuestion') ;
     var vrQuestionDiv = $('QuestionDiv') ;
  var QuestionValue = KindTrim(vrQuestion.value) ;
  
  if (QuestionValue.length <= 0)
  {    
      DecorateTagCss(vrQuestionDiv,'error','密碼保護問題不能爲空。') ;
   return false;  
  }
  else if (QuestionValue.length > 20)
  {  
   DecorateTagCss(vrQuestionDiv,'error','密碼保護問題不能超過20個字符。') ;
   return false;
  } 
  
     //密碼保護問題答案檢測
     var vrAnswer = $('tbAnswer') ;
     var vrAnswerDiv = $('AnswerDiv') ;
  var AnswerValue = KindTrim(vrAnswer.value) ;
  
  if (AnswerValue.length <= 0)
  {    
      DecorateTagCss(vrAnswerDiv,'error','密碼保護問題答案不能爲空。') ;
   return false;  
  }
  else if (AnswerValue.length > 20)
  {  
   DecorateTagCss(vrAnswerDiv,'error','密碼保護問題答案不能超過20個字符。') ;
   return false;
  }
  
  return true;
}