怎么在PHP中使用Ajax實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能

這篇文章將為大家詳細(xì)講解有關(guān)怎么在PHP中使用Ajax實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

一，利用鍵盤響應(yīng)，在不刷新本頁(yè)面的情況下驗(yàn)證表單輸入是否合法
用戶通過(guò)onkeydown和onkeyup事件來(lái)觸發(fā)響應(yīng)事件。使用方法和onclick事件類似。onkeydown表示當(dāng)鍵盤上的鍵被按下時(shí)觸發(fā)，onkeyup和它正好相反，當(dāng)鍵盤上的鍵被按下又抬起時(shí)觸發(fā)。
兩種常用調(diào)用方法：
(1)將事件添加到頁(yè)面元素中，當(dāng)用戶輸入完信息后，單擊任意鍵，onkeydown事件被觸發(fā)，并調(diào)用refer()函數(shù)。
這種方法最簡(jiǎn)單，最直接，格式如下：

復(fù)制代碼 代碼如下:

<script type="text/javascript">
   ...
   function refer(){
   ...
   }
</script>
<input type="text" onkeydown="refer()"/> 

(2)通過(guò)window.onload加載，當(dāng)頁(yè)面被載入時(shí)，事件被載入。當(dāng)用戶輸入信息時(shí)，每輸入一個(gè)字母，都將觸發(fā)該事件，在該事件調(diào)用的函數(shù)中，對(duì)用戶輸入信息進(jìn)行判斷。

復(fù)制代碼 代碼如下:

window.onload = function(){
 $('regname').onkeydown = function (){
  name = $('regname').value;
 }
}

使用onkeydown事件還可以實(shí)現(xiàn)對(duì)特定鍵的控制，包括<Enter>鍵(event.keyCode==13)、空格鍵(event.keyCode==32)、<Ctrl>鍵、<Alt>鍵等所有的按鍵，這是通過(guò)在onkeydown事件中使用keyCode屬性來(lái)實(shí)現(xiàn)的。KeyCode屬性能夠知道用戶按下的是哪個(gè)鍵。

二，注冊(cè)信息驗(yàn)證
通用函數(shù)，返回被觸發(fā)的id元素對(duì)象

復(fù)制代碼 代碼如下:

function $(id){
 return document.getElementById(id);
}
window.onload事件，表示當(dāng)前窗口被載入時(shí)觸發(fā)。function(){...}表示當(dāng)前頁(yè)面被載入時(shí)所要進(jìn)行的操作。
window.onload = function(){
 ...
}

function()函數(shù)解析；
首先將焦點(diǎn)定位到用戶名文本框，方便用戶操作。接下來(lái)聲明了5個(gè)變量，這5個(gè)變量代表了5個(gè)要檢測(cè)的數(shù)據(jù)的結(jié)果。當(dāng)檢測(cè)數(shù)據(jù)為合格時(shí)，將變量值設(shè)為"yes".

復(fù)制代碼 代碼如下:

$('regname').focus();
var cname1,cname2,cpwd1,cpwd2;  //聲明了5個(gè)變量，表示要檢測(cè)的5項(xiàng)數(shù)據(jù)chkreg()函數(shù)是每一次觸發(fā)鍵盤事件后都要調(diào)用的，該函數(shù)判斷5個(gè)變量的值，只有當(dāng)所有變量都為"yes"時(shí)，注冊(cè)按鈕才會(huì)被激活。
function chkreg(){
 if((cname1 == 'yes') && (cname2 == 'yes') && (cpwd1 == 'yes') && (cpwd2 == 'yes')){
  $('regbtn').disabled = false;
 }else{
  $('regbtn').disabled = true;
 }
}

下面驗(yàn)證用戶名，當(dāng)用戶輸入注冊(cè)名稱時(shí)，該函數(shù)會(huì)把用戶的每次輸入都做一下正則判斷，并根據(jù)結(jié)果設(shè)置不同的cname1的值。

復(fù)制代碼 代碼如下:

$('regname').onkeyup = function (){
 name = $('regname').value;  //獲取注冊(cè)名稱
 cname2 = '';
 if(name.match(/^[a-zA-Z_]*/) == ''){
  $('namediv').innerHTML = '<font color=red>必須以字母或下劃線開(kāi)頭</font>';
  cname1 = '';
 }else if(name.length <= 3){
  $('namediv').innerHTML = '<font color=red>注冊(cè)名稱必須大于3位</font>';
  cname1 = '';
 }else{
  $('namediv').innerHTML = '<font color=green>注冊(cè)名稱符合標(biāo)準(zhǔn)</font>';
  cname1 = 'yes';
 }
 chkreg(); //調(diào)用chkreg()函數(shù)，判斷5個(gè)變量是否正確
}

當(dāng)用戶名文本框失去焦點(diǎn)時(shí)，即用戶輸入完畢轉(zhuǎn)到頁(yè)面中其他元素的時(shí)候，將檢測(cè)用戶名是否重復(fù)。用戶名判斷使用Ajax技術(shù)調(diào)用了chkname.php(該頁(yè)面用戶名驗(yàn)證代碼稍后貼出)并根據(jù)chkname.php的返回值在div標(biāo)簽中顯示判斷結(jié)果。

復(fù)制代碼 代碼如下:

$('regname').onblur = function(){
 name = $('regname').value;  //獲取注冊(cè)名稱
 if(cname1 == 'yes'){ //當(dāng)用戶名稱的格式輸入合格后才進(jìn)行這一步
  xmlhttp.open('get','chkname.php?name='+name,true);  //open()創(chuàng)建XMLHttpRequest初始化連接，Ajax創(chuàng)建新的請(qǐng)求
  xmlhttp.onreadystatechange = function(){  //當(dāng)指定XMLHttpRequest為異步傳輸時(shí)(false),發(fā)生任何狀態(tài)的變化，該對(duì)象都會(huì)調(diào)用onreadystatechange所指定的函數(shù)
   if(xmlhttp.readyState == 4){  //XMLHttpRequest處理狀態(tài)，4表示處理完畢
    if(xmlhttp.status == 200){ //服務(wù)器響應(yīng)的HTTP代碼，200表示正常
     var msg = xmlhttp.responseText;  //獲取響應(yīng)頁(yè)的內(nèi)容
     if(msg == '1'){  //chkname.php頁(yè)面查找數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)沒(méi)有該用戶返回1
      $('namediv').innerHTML="<font color=green>恭喜您，該用戶名可以使用!</font>";
      cname2 = 'yes';
     }else if(msg == '2'){ //數(shù)據(jù)庫(kù)存在該用戶返回0
      $('namediv').innerHTML="<font color=red>用戶名被占用！</font>";
      cname2 = '';
     }else{
      $('namediv').innerHTML="<font color=red>"+msg+"</font>";
      cname2 = '';
     }
    }
   }
  }
  xmlhttp.send(null);
  chkreg(); //檢測(cè)是否激活注冊(cè)按鈕
 }
}

驗(yàn)證密碼，驗(yàn)證密碼時(shí)，除了可以限制密碼的長(zhǎng)度外，還可以判斷密碼的強(qiáng)度。

復(fù)制代碼 代碼如下:

$('regpwd1').onkeyup = function(){
 pwd = $('regpwd1').value;
 pwd2 = $('regpwd2').value;
 if(pwd.length < 6){
  $('pwddiv1').innerHTML = '<font color=red>密碼長(zhǎng)度最少需要6位</font>';
  cpwd1 = '';
 }else if(pwd.length >= 6 && pwd.length < 12){
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強(qiáng)度：弱</font>';
  cpwd1 = 'yes';
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強(qiáng)度：中</font>';
  cpwd1 = 'yes';
 }else{
  $('pwddiv1').innerHTML = '<font color=green>密碼符合要求。密碼強(qiáng)度：高</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();
}

二次密碼判斷比較簡(jiǎn)單，只要判斷第二次輸入密碼是否和第一次輸入相等。

復(fù)制代碼 代碼如下:

$('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();
}

上面是必須填寫信息，如果用戶希望填寫更詳細(xì)的資料，可單擊"詳細(xì)資料按鈕"

復(fù)制代碼 代碼如下:

$('morebtn').onclick = function(){
 if($('morediv').style.display == ''){
  $('morediv').style.display = 'none';
 }else{
  $('morediv').style.display = '';
 }
}

E-mail格式驗(yàn)證，輸入字符串中必須包含@和.，同時(shí)這兩個(gè)字符串的位置既不能在首尾也不能連在一起

復(fù)制代碼 代碼如下:

$('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>錯(cuò)誤的email格式</font>';
  cemail = '';
 }else{
  $('emaildiv').innerHTML = '<font color=green>輸入正確</font>';
  cemail = 'yes';

 }
 chkreg();
}

三，檢測(cè)用戶名(chkname.php)

復(fù)制代碼 代碼如下:

<?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函數(shù)初始化

復(fù)制代碼 代碼如下:

// 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) {}
 }
}

關(guān)于怎么在PHP中使用Ajax實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。