自己實現的ajax表單驗證

 今天學習ajax的時候，實現了ajax表單驗證功能。表單的驗證有了ajax的應用給使用者帶來了更好的體驗，使用者無需等待，ajax在後台與伺服器互動並返回檢驗使用者的資訊響應。

index.html：介面檔案，主要是呈現表單的結構，以及引入css和js的檔案。

validate.css：樣式表，實現樣式的檔案。

validate.js：js檔案，主要實現功能的調用。

1、建立ajax中的XMLHttpRequest對象，在後台與伺服器檔案互動，及時的返回資訊。

 

  
//建立XMLHttpRequest對象 
  
var xmlhttp = createXmlHttpObject(); 
  
var serverAddress = 'validate.php'; 
  
function createXmlHttpObject(){ 
  
    var xmlhttp; 
  
    try{ 
  
        xmlhttp = new XMLHttpRequest(); 
  
    }catch(e){ 
  
        try{ 
  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
  
        }catch(e){} 
  
    } 
  
    if(!xmlhttp){ 
  
        alert("Error creating XMLHttpRequest object"); 
  
    }else{ 
  
        return xmlhttp; 
  
    } 
  
}   
 

2、調用伺服器上的檔案

 

  
//調用伺服器上的指令檔 
  
  function validate(value,fieldID){ 
  
      if(xmlhttp){ 
  
          try{ 
  
              //僅在閒置時候並的時候繼續 
  
              if((xmlhttp.readyState == 0 || xmlhttp.readyState == 4) ){ 
  
                  //構造一個伺服器請求來驗證取出的資料 
  
                  xmlhttp.open('GET',serverAddress+'?value='+value+'&fieldID='+fieldID,true); 
  
                  xmlhttp.onreadystatechange = handleRequestChange; 
  
                  xmlhttp.send(null); 
  
              } 
  
          }catch(e){ 
  
              alert('Error:'+e.toString()); 
  
          } 
  
      } 
  
  } 
 

3、處理http請求的函數

 

 

  
//處理http響應的函數 
  
function handleRequestChange(){ 
  
    //當readyState為4時，讀取伺服器響應 
  
    if(xmlhttp.readyState == 4){ 
  
        // 當http狀態為'ok'時繼續 
  
        if(xmlhttp.status == 200){ 
  
            try{ 
  
                //從伺服器讀取響應 
  
                readResponse(); 
  
            }catch(e){ 
  
                alert('Error:'+e.toString()); 
  
            } 
  
        }else{ 
  
        alert('Error:'+xmlhttp.statusText); 
  
        }    
  
    } 
 

4、讀取伺服器響應

 

 

  
//讀取伺服器響應 
  
function readResponse(){ 
  
    //擷取文件項目 
  
    var xmlresponse = xmlhttp.responseXML; 
  
     
  
    result = xmlresponse.getElementsByTagName('result')[0].firstChild.data; 
  
    fieldID = xmlresponse.getElementsByTagName('fieldid')[0].firstChild.data; 
  
 
  
    //找到顯示錯誤的html元素 
  
    document.getElementById(fieldID+'Failed').className = (result == '0') ? 'error' : 'hidden'; 
  
} 
 

validate.php與validate.class.php：伺服器上指令檔，用於返回使用者輸入資訊的響應。

 

  
require('validate.class.php'); 
  
 
  
$validator = new Validate(); 
  
 
  
$value = $_GET['value']; 
  
$fieldID = $_GET['fieldID']; 
  
 
  
//建立一個新的xml檔案 
  
$dom = new DOMDocument(); 
  
$response = $dom->createElement('response'); 
  
$dom->appendChild($response); 
  
//建立result節點 
  
$result = $dom->createElement('result'); 
  
$response->appendChild($result); 
  
$resultText = $dom->createTextNode($validator->ValidateAjax($value,$fieldID)); 
  
$result->appendChild($resultText); 
  
 
  
//建立fieldid節點 
  
$fieldid = $dom->createElement('fieldid'); 
  
$response->appendChild($fieldid); 
  
$fieldidText = $dom->createTextNode($fieldID); 
  
$fieldid->appendChild($fieldidText); 
  
 
  
//在一個字元變數中建立xml結構 
  
$xmlString = $dom->saveXML(); 
  
//清除任何輸出資料流，否則會不能通過document.getElementsByTagName()方法訪問'<result>'和'<fieldid>'元素 
  
if(ob_get_length) ob_clean(); 
  
//輸出xml字串 
  
echo $xmlString; 
 

config.php：用於初始化，定義串連資料庫的檔案。

 

  
define ('HOST','localhost'); 
  
define ('USER','joe'); 
  
define ('PASSWORD','123'); 
  
define ('DATABASE','ajax'); 
 

：

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/132Q33559-0.jpg" border="0" alt="" />

 

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/132Q31493-1.jpg" border="0" alt="" />

650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/132Q3Ga-2.jpg" border="0" alt="" />