Question

我创建了一个JQuery脚本，用于检查数据库中的用户名，如果在keyup上键入现有名称则显示错误，这样做很好但即使此错误为真，表单仍然会提交。我可以添加哪些其他代码来检查此错误是否存在？这是我到目前为止的代码：

<script>
        $(function()
        {
        var ck_username = /^[A-Za-z0-9_]{5,15}$/;
// Username validation
        $('#username').keyup(function()
        {
        var username=$(this).val();
        if (!ck_username.test(username))
        {
        $('.usernameStatus').removeClass("success").addClass("error");
        }
        else
        {
        $('.usernameStatus').removeClass("success").removeClass("error");
            jQuery.ajax({
                type: 'POST',
                url: 'check-users.php',
                data: 'username='+ username,
                cache: false,
                success: function(response){
                    if(response == 1){
                        $('.usernameStatus').removeClass("success").addClass("error");
                    }
                    else {
                        $('.usernameStatus').removeClass("error").addClass("success");
                    }
                }
            });
        }
        });
// Submit button action
        $('#registerButton').click(function()
        {
        var username=$("#username").val();
        if(ck_username.test(username))
        {           
            jQuery.post("register.php", {
            username:username,
            },  function(data, textStatus){
            if(data == 1){
            window.location.replace("registered.php");
            }else{}
            });
        }else{
        alert("Something went Wrong - Please Check All Fields Are Filled In Correctly");
        }
        return false;
        });
        //End
        });
        </script>

谢谢

Answer 1

请参阅有关代码的评论假设data == 1表示该名称已经注册，您将显示错误

<script>
        $(function()
        {
        var name = false; // a variable that holds false as the initial value
        var ck_username = /^[A-Za-z0-9_]{5,15}$/;
// Username validation
        $('#username').keyup(function()
        {
        var username=$(this).val();
        if (!ck_username.test(username))
        {
        $('.usernameStatus').removeClass("success").addClass("error");
        }
        else
        {
        $('.usernameStatus').removeClass("success").removeClass("error");
            jQuery.ajax({
                type: 'POST',
                url: 'check-users.php',
                data: 'username='+ username,
                cache: false,
                success: function(response){
                    if(response == 1){
                        $('.usernameStatus').removeClass("success").addClass("error");
                    }
                    else {
                        $('.usernameStatus').removeClass("error").addClass("success");
                        name = true; // on success , if the name isnt there then assign it to true
                    }
                }
            });
        }
        });
// Submit button action
        $('#registerButton').click(function()
        {
        var username=$("#username").val();
        if(ck_username.test(username) && name == true) // check for the value of name
        {           
            jQuery.post("register.php", {
            username:username,
            },  function(data, textStatus){
            if(data == 1){
            window.location.replace("registered.php");
            }else{}
            });
        }else{
        alert("Something went Wrong - Please Check All Fields Are Filled In Correctly");
        }
        return false;
        });
        //End
        });
        </script>

Answer 2

您应该检查$('.usernameStatus')的状态，而不是检查正则表达式的用户名，因为它可能会通过正则表达式测试，但仍然无法从您的数据库返回重复测试。

所以

$('#registerButton').click(function()
        {
        var username=$("#username").val();
        if(ck_username.test(username))
        {

应改为：

$('#registerButton').click(function()
        {
        var username=$("#username").val();
        if(!$('.usernameStatus').hasClass('error'))
        {

更好的方法是引入一个保存name字段有效性的变量，这样你就不需要一直得到DOM元素并检查它的类。

Answer 3

我认为您的错误可能是因为data语法错误

应该是这样的：

data: 'username:'+ username,

调试您的PHP代码以查看它当前是否正确接收用户名

如果用户名不存在，则表单验证仅发送

3 个答案: