基於PHP+Ajax實現表單驗證的詳解

一，利用鍵盤響應，在不重新整理本頁面的情況下驗證表單輸入是否合法
使用者通過onkeydown和onkeyup事件來觸發響應事件。使用方法和onclick事件類別似。onkeydown表示當鍵盤上的鍵被按下時觸發，onkeyup和它正好相反，當鍵盤上的鍵被按下又抬起時觸發。
兩種常用調用方法：
(1)將事件添加到頁面元素中，當使用者輸入完資訊後，單擊任意鍵，onkeydown事件被觸發，並調用refer()函數。
這種方法最簡單，最直接，格式如下： 複製代碼 代碼如下:<script type="text/javascript">
   ...
   function refer(){
   ...
   }
</script>
<input type="text" onkeydown="refer()"/> 

(2)通過window.onload載入，當頁面被載入時，事件被載入。當使用者輸入資訊時，每輸入一個字母，都將觸發該事件，在該事件調用的函數中，對使用者輸入資訊進行判斷。
複製代碼 代碼如下:window.onload = function(){
 $('regname').onkeydown = function (){
  name = $('regname').value;
 }
}

使用onkeydown事件還可以實現對特定鍵的控制，包括<Enter>鍵(event.keyCode==13)、空格鍵(event.keyCode==32)、<Ctrl>鍵、<Alt>鍵等所有的按鍵，這是通過在onkeydown事件中使用keyCode屬性來實現的。KeyCode屬效能夠知道使用者按下的是哪個鍵。

二，註冊資訊驗證
通用函數，返回被觸發的id元素對象複製代碼 代碼如下:function $(id){
 return document.getElementById(id);
}
window.onload事件，表示當前視窗被載入時觸發。function(){...}表示當前頁面被載入時所要進行的操作。
window.onload = function(){
 ...
}

function()函數解析；
首先將焦點定位到使用者名稱文字框，方便使用者操作。接下來聲明了5個變數，這5個變數代表了5個要檢測的資料的結果。當檢測資料為合格時，將變數值設為"yes". 複製代碼 代碼如下:$('regname').focus();
var cname1,cname2,cpwd1,cpwd2;  //聲明了5個變數，表示要檢測的5項資料chkreg()函數是每一次觸發鍵盤事件後都要調用的，該函數判斷5個變數的值，只有當所有變數都為"yes"時，註冊按鈕才會被啟用。
function chkreg(){
 if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){
  $('regbtn').disabled = false;
 }else{
  $('regbtn').disabled = true;
 }
}

下面驗證使用者名稱，當使用者輸入註冊名稱時，該函數會把使用者的每次輸入都做一下正則判斷，並根據結果設定不同的cname1的值。複製代碼 代碼如下:$('regname').onkeyup = function (){
 name = $('regname').value;  //擷取註冊名稱
 cname2 = '';
 if(name.match(/^[a-zA-Z_]*/) == ''){
  $('namediv').innerHTML = '<font color=red>必須以字母或底線開頭</font>';
  cname1 = '';
 }else if(name.length <= 3){
  $('namediv').innerHTML = '<font color=red>註冊名稱必須大於3位</font>';
  cname1 = '';
 }else{
  $('namediv').innerHTML = '<font color=green>註冊名稱符合標準</font>';
  cname1 = 'yes';
 }
 chkreg(); //調用chkreg()函數，判斷5個變數是否正確
}

當使用者名稱文字框失去焦點時，即使用者輸入完畢轉到頁面中其他元素的時候，將檢測使用者名稱是否重複。使用者名稱判斷使用Ajax技術調用了chkname.php(該頁面使用者名稱驗證代碼稍後貼出)並根據chkname.php的傳回值在div標籤中顯示判斷結果。複製代碼 代碼如下:$('regname').onblur = function(){
 name = $('regname').value;  //擷取註冊名稱
 if(cname1 == 'yes'){ //當使用者名稱稱的格式輸入合格後才進行這一步
  xmlhttp.open('get','chkname.php?name='+name,true);  //open()建立XMLHttpRequest初始化串連，Ajax建立新的請求
  xmlhttp.onreadystatechange = function(){  //當指定XMLHttpRequest為非同步傳輸時(false),發生任何狀態的變化，該對象都會調用onreadystatechange所指定的函數
   if(xmlhttp.readyState == 4){  //XMLHttpRequest處理狀態，4表示處理完畢
    if(xmlhttp.status == 200){ //伺服器響應的HTTP代碼，200表示正常
     var msg = xmlhttp.responseText;  //擷取響應頁的內容
     if(msg == '1'){  //chkname.php頁面尋找資料庫，資料庫沒有該使用者返回1
      $('namediv').innerHTML="<font color=green>恭喜您，該使用者名稱可以使用!</font>";
      cname2 = 'yes';
     }else if(msg == '2'){ //資料庫存在該使用者返回0
      $('namediv').innerHTML="<font color=red>使用者名稱被佔用！</font>";
      cname2 = '';
     }else{
      $('namediv').innerHTML="<font color=red>"+msg+"</font>";
      cname2 = '';
     }
    }
   }
  }
  xmlhttp.send(null);
  chkreg(); //檢測是否啟用註冊按鈕
 }
}

驗證密碼，驗證密碼時，除了可以限制密碼的長度外，還可以判斷密碼的強度。複製代碼 代碼如下:$('regpwd1').onkeyup = function(){
 pwd = $('regpwd1').value;
 pwd2 = $('regpwd2').value;
 if(pwd.length < 6){
  $('pwddiv1').innerHTML = '<font color=red>密碼長度最少需要6位</font>';
  cpwd1 = '';
 }else if(pwd.length >= 6 && pwd.length < 12){
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：弱</font>';
  cpwd1 = 'yes';
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：中</font>';
  cpwd1 = 'yes';
 }else{
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強度：高</font>';
  cpwd1 = 'yes';
 }
 if(pwd2 != '' && pwd != pwd2){
  $('pwddiv2').innerHTML = '<font color=red>兩次密碼不一致!</font>';
  cpwd2 = '';
 }else if(pwd2 != '' && pwd == pwd2){
  $('pwddiv2').innerHTML = '<font color=green>密碼輸入正確</font>';
  cpwd2 = 'yes';
 }
 chkreg();
}

二次密碼判斷比較簡單，只要判斷第二次輸入密碼是否和第一次輸入相等。複製代碼 代碼如下:$('regpwd2').onkeyup = function(){
 pwd1 = $('regpwd1').value;
 pwd2 = $('regpwd2').value;
 if(pwd1 != pwd2){
  $('pwddiv2').innerHTML = '<font color=red>兩次密碼不一致!</font>';
  cpwd2 = '';
 }else{
  $('pwddiv2').innerHTML = '<font color=green>密碼輸入正確</font>';
  cpwd2 = 'yes';
 }
 chkreg();
}

上面是必須填寫資訊，如果使用者希望填寫更詳細的資料，可單擊"詳細資料按鈕"複製代碼 代碼如下:$('morebtn').onclick = function(){
 if($('morediv').style.display == ''){
  $('morediv').style.display = 'none';
 }else{
  $('morediv').style.display = '';
 }
}

E-mail格式驗證，輸入字串中必須包含@和.，同時這兩個字串的位置既不能在首尾也不能連在一起複製代碼 代碼如下:$('email').onkeyup = function(){
 emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 $('email').value.match(emailreg);
 if($('email').value.match(emailreg) == null){
  $('emaildiv').innerHTML = '<font color=red>錯誤的email格式</font>';
  cemail = '';
 }else{
  $('emaildiv').innerHTML = '<font color=green>輸入正確</font>';
  cemail = 'yes';

 }
 chkreg();
}

三，檢測使用者名稱(chkname.php)
複製代碼 代碼如下:<?php
session_start();
include_once "conn/conn.php";
$reback = '0';
$sql = "select * from tb_member where name='".$_GET['name']."'";
$num = $conne->getRowsNum($sql);
if($num == 1){
 $reback = '2';
}else if($num == 0){
 $reback = '1';
}else{
 $reback = $conne->msg_error();
}
echo $reback;
?>

四，XMLHttpRequest函數初始化
複製代碼 代碼如下:// JavaScript Document
var xmlhttp = false;
if (window.XMLHttpRequest) {          //Mozilla、Safari等瀏覽器
 xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {         //IE瀏覽器
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
 }
}