javascript - PHP -> jQuery -> AJAX 表单验证

Question

我正在使用 jQuery 验证 PHP 中的注册表单。在我的 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.即使我使用的名称不在数据库中。我在check-username.php上进行了测试在服务器上使用虚拟“POST”值并且工作正常。所以我对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*/}
            }
        });

    }, 

);