如果用户名被占用，则阻止用户注册

Question

因此，我的脚本完美地检查用户名是否空闲，但不管用户提交所有表单时，他都可以注册。我需要一种方法，以防止用户注册，如果用户名被采取。代码如下：

index.php

$("#username").keyup(function(){
    var val=$("#username").val();
    $("#address").html("Your address will be askfolio.com/" + val);

    $("#freeu").html("<img src='css/ajax-loader.gif' style='margin-left:-75px;'>");
    if (val != ''){
        $.ajax({
            url:"s/ufree.php",
            method:"POST",
            data:$("#username"),
            success:function(data){
                if (data == 1){
                    $("#freeu").html("<img src='css/accept.png' style='float:left;padding-right:65px;'>");
                    $("#reg-error").css("display","none");

                }else{
                    $("#freeu").html('');
                    $("#reg-error").css("display","block");
                    $("#reg-error").html('Username is already taken, try another.');
                    $("#username").focus();
                    return false;
                }

            }
        });

    }else {
        $("#freeu").html('');
    }


});
function Users_Registration() 
{
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var name = $("#name").val();
    var lastname=$("#lastname").val();
    var username = $("#username").val();
    var remail = $("#remail").val();
    var rpass = $("#rpass").val();
    var day=$("#day").val();
    var month=$("#month").val();
    var year=$("#year").val();


    if(name == "")
    {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please enter your name in the required field.');
        $("#name").focus();
    }

    else if(lastname == "")
    {
        $("#reg-error").css("display","block");
        $("#reg-error").html(' Please enter your Last Name in the required field.');
        $("#lastname").focus();
    }
    else if(username == ""){
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please enter your desired username to proceed.');
        $("#username").focus();
    }
    else if(remail == "")
    {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please enter your email address to proceed.');
        $("#remail").focus();
    }
    else if(reg.test(remail) == false)
    {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please enter a valid email address to proceed.');
        $("#remail").focus();
    }else if (rpass == "") {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please enter a valid password to proceed.');
        $("#rpass").focus();
    }
    else if (day == ""){
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please select a day to proceed.');
        $("#day").focus();

    }else if (month == "") {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please select a month to proceed.');
        $("#month").focus();
    }else if (year == "") {
        $("#reg-error").css("display","block");
        $("#reg-error").html('Please select a year to proceed.');
        $("#year").focus();
    }
    else
    {
        var dataString = 'name='+ name + '&lastname='+ lastname + '&username='+ username + '&rpass='+ rpass + '&remail='+ remail + '&year=' + year + '&month=' + month + '&day=' + day  +'&page=signup';
        $.ajax({
            type: "POST",
            url: "register.php",
            data: dataString,
            cache: false,
            beforeSend: function() 
            {
                $("#reg-error").html('<br clear="all"><div style="padding-left:115px;"><font style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:black;">Please wait</font> <img src="images/loadings.gif" alt="Loading...." align="absmiddle" title="Loading...."/></div><br clear="all">');
            },
            success: function(response)
            {
                $("#reg-error").html("Loading");
                var username="<?php echo $loguser; ?>";
                window.location=username;
            }
        });
    }
}

ufree.php

<?php

include "db.php";

if (isset($_POST['username'])) {
    $username=$_POST['username'];

    $sql=mysql_query("SELECT * FROM users WHERE username='$username'");
    if (mysql_num_rows($sql) == 0) {
        echo "1";
    }else {
        echo "<div style='padding-top:4px;'>username is taken</div>";
    }

}
?>

Answer 1

除了SQL查询中的sql注入漏洞外，您的用户名检查方法有些多余。通过在每次输入字符时检查用户名，您会给浏览器和服务器增加额外的负载。

我建议您将这两个过程合并在一个步骤中，这意味着您在同一位置进行用户名检查和注册。在您的Register.php文件中，在注册之前检查用户名的可用性，如果获取了用户名，则显示一条正确的消息，如果不是，则进行注册。

Answer 2

不用说，但不管javascript验证如何，您的服务器仍然需要检查用户名在注册时是否可用，因为任何人都可以禁用或操作javascript。

同样，正如哈米德所说，你的php代码是高度易受攻击的。在sql中使用它之前，至少应该使用以下内容：

$username = mysql_real_escape_string( $_POST[ 'username' ] );

也就是说，为了可用性，您需要做的是在表单中添加一个onsubmit函数，该函数在提交之前检查用户名是否有效。(为了简单起见，总结了你的代码)

var validUser = false;

$("#username").keyup(function(){

    var val=$("#username").val();

    validUser = false;

    if (val != ''){
        $.ajax({
            url:"s/ufree.php",
            method:"POST",
            data:val,
            success:function(data){
                if (data == 1){
                    validUser = true;
                }else{
                    $("#username").focus();
                    return false;
                }
            }
        });

}else {
$("#freeu").html('');
}

function formsubmit()
{
    if( !validUser )
    {
        alert( 'Username is already taken, try another' );
        return false;
    }
    return true;
}

然后在你的表单中：

<form action="whatever" onsubmit="return formsubmit();">
...
</form>

Answer 3

我最喜欢的一个jQuery插件是validation eng。

https://github.com/posabsolute/jQuery-Validation-Engine

它有非常好的验证来做你正在寻找的事情。它做所有类型的字段，包括用于用户名检查的内联ajax。如果来自ajax调用的响应不是true，那么表单将不会提交。我把它用在我的注册表单上。一旦用户转到它验证的下一个字段，如果它没有通过，即用户名不可用，它将以红色显示用户名不可用。表单不会提交。

设置起来并不难。下面是ajax的演示。注意，它实际上不会在这个演示站点上进行验证，但它只是一个示例。您可以看到，如果它是空的或未经过验证，它是如何不提交的。它是非常可定制的。

http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html

哦，当然，要注意任何mysql的安全问题，并检查以确保dupe不能被输入到数据库中。