PHP - > jQuery - > AJAX表單驗證

Question

我在PHP中使用jQuery驗證註冊表單。在我的PHP我的形式如下：

<form id="register-form"> 
    <input class="form-control" name="dispName" placeholder="Display name" type="text"> 
    <input class="form-control" name="email" placeholder="Email address" type="email"> 
    <input class="form-control" name="password" id="password" placeholder="Password" type="password"> 
    <input class="form-control" name="password2" placeholder="Re-enter password" type="password"> 
    <input class="btn btn-primary" id="submit-button" type="submit" value="Request Access"> 
</form> 

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script> 
<script src="request.js"></script> 

在我request.js驗證情況如下：

$.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: {dispName: 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." 
    ); 
$("#register-form").validate({ 
    rules: { 
     dispName: { 
      required:true, 
      nowhitespace: true, 
      lettersonly: true, 
      checkUserName: true 
     }, 
     email: { 
     required: true, 
     email: true, 
     remote: "http://localhost:3000/inputValidator" 
     }, 
     pw: { 
     required: true, 
     strongPassword: true 
     }, 
     cpw: { 
     required: true, 
     equalTo: '#password' 
     } 
    }, 
    messages: { 
     email: { 
     required: 'Please enter an email address.', 
     email: 'Please enter a <em>valid</em> email address.', 
     } 
    } 
    }); 

在我的PHP驗證服務器端

：

<?php 
$searchVal = $_POST['dispName']; 
try { 
    $dbh = new PDO("mysql:host=$hostname;dbname=$dbname", $username, $password); 

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

    if($result){ 
     echo 'true'; 

    }else { 
     echo 'false'; 
    } 

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

我一直即使我使用名稱不在數據庫中，也得到This username is already taken! Try another.。我使用虛擬「POST」值在服務器上的check-username.php上進行了測試，結果表明它工作正常。所以我對request.js的語法有了強烈的感覺。任何人都可以點我在正確的方向....預先感謝...

Answer 1

你可以做這樣的事情：

$.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: {dispName: value}, 
      success: function(data) { 
       result = (data == true) ? true : false; 
if(result == true){/*here you show error according to your way*/} 
      } 
     }); 

    }, 

); 

Answer 2

var typingTimerEmail;    //timer identifier 
    var doneTypingIntervalEmail = 1000; //time in ms, 5 second for example 
    var $input = $('#email'); 

    //on keyup, start the countdown 
    $input.on('keyup', function() { 

     clearTimeout(typingTimerEmail); 
     $('#submit').attr("disabled", true); 
     typingTimerEmail = setTimeout(doneTypingEmail, doneTypingIntervalEmail); 
    }); 

    function doneTypingEmail() { 

     //do something 
     var url = "http://172.16.0.60/bird_eye_api/"; 
     var email_exist = $('#email').val(); 

     if(email_exist.length > 0){ 
      $('.email_exist_msg').hide();  
      $('#submit').attr("disabled", false); 
      //$('.check_mail').css('border','1px solid #ff0000'); 


      $.ajax({ 
       url: url + "admin/check", 
       type: 'POST', 
       data: {'email':email_exist}, 
       success: function (data) { 
        console.log(data) 
        if(data == 'true'){ 
         $('#submit').attr("disabled", true); 
         $('.email_exist_msg').html('User with this email already exist').show();  
        } else { 

         $('#submit').attr("disabled", false); 
         //$('.check_mail').css('border','');  
         $('.email_exist_msg').html('User with this email already exist').hide();  
        } 
       }, 
      }); 
     } 
     if(email_exist.length==0){ 
      $('.email_exist_msg').hide(); 
      //$('.check_mail').css('border','')  
     } 
    } 

您可以自定義URL設置爲。在您的電子郵件字段的關鍵，它會觸發ajax到您的網址，並會檢查用戶是否存在。肯定會返回真或假。據阿賈克斯成功，它會顯示消息。