Question

我正在开发一个网站，现在就是它的注册表格！但我有类似的问题！我想创建一个用户名输入字段，当用户输入时，检查数据库中是否已存在用户名并提供一些输出。

错误就是这个：假设在数据库中只有用户名“Manuel”。如果我在输入字段中键入“Manuel”，则不会显示任何消息。现在如果我输入任何其他字符，它会给我一条消息“用户已经存在”。如果我删除最后输入的字符，则消息消失。如果我再次输入并且有类似“Manuela”的内容，则会显示消息，如果我再次输入并且“Manuelae”消息消失

感谢您的帮助!!

这里是代码

这里输入字段：（register.php）

<input type="text" id="username" name="username" maxlength="40" required="required">
<span id="username-info">What's your username?</span>

这里有javascript和jquery代码（registration.js）

$(document).ready(function () {

    var userExists = new Boolean();

    var username = $("#username");
    var usernameInfo = $("#username-info");

    username.keyup(validateUsername);

}

这里的函数validateUsername（）：

function validateUsername(){
    checkUsername();
    var minlenght = 5;
    var usernameVal = username.val();
    if(usernameVal.length < 1){
        usernameInfo.addClass("input-error");
        usernameInfo.text(messages.FIELD_REQUIRED);
    }  else if(usernameVal.length < minlenght){
        usernameInfo.addClass("input-error");
        usernameInfo.text(messages.USERNAME_MIN_WORDS+minlenght+' '+messages.USERNAME_CHARACTERS);
    } else if(userExists){

        //here i tell the user that the user already exists
        usernameInfo.addClass("input-error");
        usernameInfo.text('The user already exists');

    } else {
        usernameInfo.removeClass("input-error");
        usernameInfo.text("");  
    }

}

这里的函数checkUsername（）：

function checkUsername() {
        var url = 'processregistration.inc.php'; 

        $.ajax({
            type: "POST",
            dataType:"json",
            url: url,
            data: {username: username.val()},
            success: function(data){

                userExists = data.CHECK; //true if the user exists, false if not

            }
        });
    }

Answer 1

Ajax表示异步 JavaScript和XML。

您正在检查实际未收到的值。

你应该这样做：

function validateUsername() {
    // remove input-error, text

    if (...localcheck...) {
        // add input-error, text
    }
    else if (...otherlocalcheck...) {
        // add input-error, text
    }
    else {
        $.ajax({
            ...
            success : function(data) {
                if (data.CHECK) {
                    // add input-error, text
                }
            }
        });
    }
}

Answer 2

我认为你走在正确的轨道上，但我不认为你的实施是正确的。

注意：我不是javascript英雄

$("#filter").keyup( function(e) {

var filter = $("#filter").val(),
    timer = $('#filter').data('timeout'),

if(timer) {
    clearTimeout(timer);
    $('#username').removeData('timeout');
}

$('#username').data('timeout', setTimeout(function() {
    var url = 'processregistration.inc.php'; 

    $.POST(url, {username: $('#username').val()}, function(data) {
        // you get the picture ;)
        updateComponentThatShowsIfUserNameIsTakenFunction(data.CHECK);
    });
}, 100));   

function updateComponentThatShowsIfUserNameIsTakenFunction(taken) {
    $('#username').addClass('input_error');
}

我做了什么：删除了全局变量，它们很烦人且容易出错。相反，我正在使用名为updateComponentThatShowsIfUserNameIsTakenFunction的回调。您也可以将其更改为使用“数据”直接调用该函数。我还为你添加了一个超时，这样你就不会在关键时调用服务器。每次按键取消之前的超时，导致检查仅在用户完成输入后100ms触发（您不想向服务器发送垃圾邮件）。

我希望这有效并帮助你进一步发展！

$ .ajax错误从php文件中获取数据

2 个答案: