2013-06-28 9 views
1

的jQuery - AJAX形式數據庫檢查使用</p> <ul> <li>的jQuery插件驗證</li> <li>jQuery的</li> </ul> <p>嘗試獨特的價值

  • 確保用戶名不存在中數據庫
    • 有一個表格+一個字段+遠程檢查
    • 我想讓jquery使用ajax檢查,如果它存在。

是什麼在起作用:

  • 檢查username.php本身沒有工作

什麼不

  • 形式似乎並沒有被能夠傳遞返回布爾值來驗證遠程jQuery驗證
  • 我怎樣才能讓它傳遞值,以便該字段可以驗證?

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script> 
    <script language="javascript" src="validate.js"></script> 

    <meta name="generator" content="" /> 
    <style type="text/css"></style> 
    </head> 
<body> 

<form action="/" method="post" id="register-form"> 
    <div> 
     <label for="username">Username<font color="red">*</font>:</label> 
     <input type="text" name="username" size="20" id="username" /> 
    </div> 
    <div> 
     <input type="submit" name="submit" value="submit" /> 
    </div> 
</form> 
</body> 
</html> 

jQuery驗證

$().ready(function() { 
    // validate signup form on keyup and submit 
    $("#register-form").validate({ 
     rules: { 
      username: { 
       required: true, 
       remote: "check-username.php" 
       }, 
     }, 
     messages: { 
      username:{ 
       remote: "This username is already taken! Try another." 
      }, 
     }, 
    }); 
}); 

入住USERNAME.php

<?php 

$searchVal = $_POST['username']; 

try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=$data", $username, $password); 

    $sql = "SELECT * FROM users WHERE USERNAME = " . "'" . $searchVal . "'"; 
    $stmt = $dbh->query($sql); 
    $result = $stmt->fetch(PDO::FETCH_ASSOC); 

    if($result>0){ 
    return true; 
    }else { 
    return false; 
    } 

    $dbh = null; 
    } 
     catch(PDOException $e) 
    { 
     echo $e->getMessage(); 
    }  
?> 
+0

移動'$ dbh = null;'一些行向上移動。嘗試了 – pl71

+0

,但輸入重複值時該字段不檢查數據庫。 – Lacer

+0

這與您的問題沒有關係,但最好在'return'之前斷開連接。順便說一句,我使用[this](http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/) - 非常簡單的代碼來檢查使用名稱等 – pl71

回答

1

沒有檢查你的代碼的其餘部分,但試試這個:

<?php 
    $searchVal = $_POST['username']; 
    try { 
     $dbh = new PDO("mysql:host=$hostname;dbname=$data", $username, $password); 
     $sql = "SELECT * FROM users WHERE USERNAME = " . "'" . $searchVal . "'"; 
     $stmt = $dbh->query($sql); 
     $result = $stmt->fetch(PDO::FETCH_ASSOC); 

     if($result>0) { 
      $valid = "true"; 
     } else { 
      $valid = "false"; 
     } 

     $dbh = null; 

     echo $value; 
    } 
    catch(PDOException $e) { 
     echo $e->getMessage(); 
    }  

>

+0

PHP代碼已經工作本身,而是由於某種原因,我不能讓jQuery的驗證可以查看驗證值驗證字段。 – Lacer

0

這是使用不同的插件從here的解決方案。 對於使用Ajax調用檢查名稱可用性使以下:

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-"></script> 
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> 

注意,那en區域也必須要包括:

下載附加jquery.validationEngine.js和您的語言環境等之後。

打開並修改您的語言文件,您必須指出您的php文件的位置,該文​​件將檢查數據庫的名稱可用性或使用默認文件名。因此,如果您使用英語,請在jquery.validationEngine-en.js中查找以下行。

"ajaxUserCallPhp": { 
    "url": "phpajax/ajaxValidateFieldUser.php", 

在這裏,您可以更改文件名,如果你想這樣的:

"ajaxUserCallPhp": { 
    "url": "my-file_which_will_check_db.php", 

和你my-file_which_will_check_db.php應該是這樣的:

<? 
/* RECEIVE VALUE */ 
$validateValue=$_REQUEST['fieldValue']; 
$validateId=$_REQUEST['fieldId']; 

$validateError= "This username is already taken"; 
$validateSuccess= "This username is available"; 

/* RETURN VALUE */ 
$arrayToJs = array(); 
$arrayToJs[0] = $validateId; 

$dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass); //Connect with your credentials 
$stmt = $dbh->query("SELECT * From `users` WHERE `USERNAME` = '{$validateValue}'"); 
$dbh = null;     // Disconnect 

sleep(1); /*added because check is very fast and the label 'checking...' is not visible*/ 

if ($result = $stmt->fetch()) { 
$arrayToJs[1] = false;   // found user with that name 
echo json_encode($arrayToJs);   
} 
else { 
$arrayToJs[1] = true; 
echo json_encode($arrayToJs);  // that user name is free 
} 
?> 

最後,你的HTML標記應該是這樣的:

<input type="text" name="user_name" id="user_name" class="validate[required],custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCallPhp] text-input" /> 

此處注意其他class屬性。

,包括以下腳本:

<script> 
    $(document).ready(function(){ 
    $("#register_form").validationEngine(); 
    }); 
</script> 
7

爲了驗證值到服務器端,你應該添加新的驗證方法。

$().ready(function() { 

    $.validator.addMethod("checkUserName", 
     function(value, element) { 
      var result = false; 
      $.ajax({ 
       type:"POST", 
       async: false, 
       url: "check-username.php", // script to validate in server side 
       data: {username: value}, 
       success: function(data) { 
        result = (data == true) ? true : false; 
       } 
      }); 
      // return true if username is exist in database 
      return result; 
     }, 
     "This username is already taken! Try another." 
    ); 

    // validate signup form on keyup and submit 
    $("#register-form").validate({ 
     rules: { 
      "username": { 
       required: true, 
       checkUserName: true 
      } 
     } 
    }); 
});   

如上所述,方法checkUserName將驗證服務器端,讓錯誤消息「此用戶名已被佔用!試試另一個。」如果用戶名不存在的。

欲瞭解更多信息和有關jQuery驗證其方法的例子:click here

希望這幫助。

相關問題