如何强制 jQuery Validate 检查数据库中的重复用户名？

Question

我即将进入这个项目的中期，因此由于代码草率，我不得不进行一些重写。我正在使用 jQuery 1.6.1 和 Validate 1.8.1。

首先，这是运行后端的 PHP (dbquery.php)：

include("../includes/dbconnection.php");
session_start();

$location='';
$action='';
if($_GET['action']=='')
    $action=$_POST['action'];
else
    $action=$_GET['action'];

if($action=='checkusername'){
    $error='';
    $username=$_GET['username'];
    // exclude denied account
    $checkuserquery=mysql_query("Select * from database_users as user LEFT OUTER JOIN  database_approval as approval on user.user_id=approval.approval_user_id  where (approval.approval_status IS NULL or approval.approval_status <> 4) and user_username='".$username."'");
    $checkuserresult=mysql_numrows($checkuserquery);
    if($checkuserresult>0) {
        $error = 'false';
    } else {
        $error = 'true';
    }
    echo $error;
} 

我正在尝试使用 jQuery Validate 脚本动态查询数据库中的现有用户名。我要么遇到两个极端：它永远不起作用，要么它总是返回给定的用户名。

我相信问题是我无法获取用户名变量的输入值。当我在函数（输出）中创建警报（用户名）时，它什么也不返回。我的假设是 .val() 仅在页面加载时才起作用，因此我在输入中输入的任何内容由于某种原因都不起作用。

这是我重新编写并从在线源复制的 jQuery：

$(document).ready(function(){

$.validator.addMethod("checkAvailability",function(value,element){
    var username = $("#username").val();
    $.ajax({
          url: "dbquery.php",
          type: "GET",
          async: false,
          data: "action=checkusername&username="+username,
          success: function(output) {
                     return output;
         }
     });
},"Sorry, this user name is not available");

// jQuery Validation script
    $("#signup").validate( {
        rules: {
            username: {
                required: true,
                minlength: 5,
                checkAvailability: true // remote check for duplicate username
            },
        },
        messages: {
            username: {
                required: "Enter a username"
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });

});

我只是 jQuery 的初学者，但我对这段代码感到非常不舒服。我是否走在正确的轨道上，还是应该在 rules 和 username 下使用 remote:？有人告诉我，由于我尝试验证的输入值的动态性质，remote 方法将不起作用。

我遇到的另一个主要问题是仅当数据库中已存在用户名时才显示远程错误消息。不幸的是，它显示 dbquery.php 返回的是 true 还是 false。如果我尝试使用现有的用户名，它会返回 false，然后我重写一个返回 true 的新用户名，该消息不会消失。同样，当我写入用户名并返回 true 时，我仍然收到远程错误消息。

原始编码器引用 getXMLHTTP 并使用 ActiveXObject。他编写的方法似乎有点过时，所以我试图使代码更现代一些并清理它。

5/25 - 我正在编辑此内容以包含旧的原始 JavaScript 代码，该代码可以工作，但使用的是我想摆脱的过时方法（我已经删除了以下代码并替换为 jQuery上面）：

function getXMLHTTP() { //function to return the xml http object
    var xmlhttp=false;    
    try{
        xmlhttp=new XMLHttpRequest();
    }
    catch(e)    {        
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e){
            try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e1){
                xmlhttp=false;
            }
        }
    }

    return xmlhttp;
}
//validate username
function validateUsername(username){
    var strURL="dbquery.php?action=checkusername&username="+username;
    var req = getXMLHTTP();        
    if (req) {            
        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {          
                    if(req.responseText=='notavailable'){
                        document.getElementById("errorusername").style.display="block";
                        document.getElementById("errorusername").innerHTML="<div id=\"errors\"><strong>"+username+"</strong> is already taken by another user.</div>";
                        error = true;
                    }
                    else{
                        error = false;
                        document.getElementById("errorusername").style.display="none";   
                    }

                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }                
        }            
        req.open("GET", strURL, true);
        req.send(null);
    }     
}

Answer 1

检查何时调用验证函数、username 的值是什么以及 output 的值是什么：是 true 还是 >“真”？

我猜测后者：一个字符串，所以你可以这样做：

return output === "true" ? true : false; // I sincerely recommend using === here

因为如果你 return "false"; 将评估为 true 因为它是一个非空字符串 - 耶动态语言！ :/

remote 示例：

$("#signup").validate( {
    rules: {
        username: {
            required: true,
            minlength: 5,
            remote: {
                url: "dbquery.php",
                type: "get",
                data: {
                    action: function () {
                        return "checkusername";
                    },
                    username: function() {
                        var username = $("#username").val();
                        return username;
                    }
                }
            }
        }
    },
    messages: {
        username: {
            required: "Enter a username"
        }
    },
    submitHandler: function(form) {
        form.submit();
    }
});

要设置自定义错误消息，您的 PHP 文件必须返回该消息而不是 false，因此 echo "Sorry, this user name is not available" in你的 PHP 文件。

Answer 2

当您添加addMethod时，您应该从服务器端返回true或false。

并且该值还必须从 addMethod 返回。

即像这样的东西

$.validator.addMethod("checkAvailability",function(value,element){
    var parameter="action=checkusername&username="+username;
    $.ajax({
          url: "dbquery.php",
          type: "POST",
          async: false,
          data: parameter
          success:function(output)
                 {
                    return output
                 }
     });
},"Sorry, this user name is not available");

Answer 3

我遇到了同样的问题，但我发现最简单的解决方案只是通过 php 编码为 json 后返回 true 或 false。

if ($users->username_exists())
{
    echo json_encode(FALSE);
}else{
    echo json_encode(TRUE);
}

Answer 4

在服务器端脚本上，尝试返回 true 或 false 而不是 available 和 notavailable，因为这两个字符串相当于true。

Answer 5

我的代码：

$( "#myform" ).validate({
  rules: {
    EMAIL: {
      remote: {
        type: "post",  
        url: "checkMail.php",           
        data:{checkUsername:function(){return $("#EMAIL").val()}            
        }
      }
    }
  },messages:{EMAIL:{remote: "Already taken!"}}
});