Какой лучший способ создать обработчик проверки имени пользователя AJAX?

Question

Я занимаюсь разработкой веб-сайта для социальных сетей и совершенствую интерфейс, выполняя некоторые действия.

Одним из улучшений, которые я внедряю, является валидатор AJAX для имен чатов. Установка такова:

Посетитель переходит на страницу регистрации, и посетитель вводит желаемое имя чата в поле. Во время набора пользователю дается мгновенная обратная связь о том, используется ли это имя чата, содержит ли он недопустимые символы, имеет ли он неправильную длину и т. Д.

У меня все работает: я настроил простой PHP-скрипт для работы в качестве обработчика AJAX, который привязан к событиям onkeyup и blur моего ввода. Однако каждый запрос включает запрос к базе данных, который не может быть хорошим.

Мой вопрос: как мне это упростить? Конечно, запрос к базе данных на каждый onkeyup или blur не очень хорошая идея?

Answer 1

Я рекомендую следующую (основанную на времени) стратегию:

1. Срабатывание ключей
2. Отмена тайм-аута (если он запущен одновременно)
3. Началоновый тайм-аут (500 - 1000 мс)
4. Выполните запрос по истечении времени ожидания

Таким образом, вы можете делать запрос каждый раз, когда пользователь прекращает вводить текст, по крайней мере, 500 - 1000 мс.Это экономит некоторые запросы, пока пользователь все еще печатает.Вы можете запустить запрос сразу же после запуска события blur, поскольку пользователь, очевидно, больше не печатает.

Пример (с использованием jQuery) с 500 мс:

var timeout = null;

var stopTimeout = function () {
    // step 2: stop running timeout
    if (timeout !== null) {
        clearTimeout(timeout);
        timeout = null;
    }
};

var doRequest = function () {
    // step 4: do request
};

// step 1: event fires
$('input').keyup(function () {
    stopTimeout();
    // step 3: start new timeout
    timeout = setTimeout(doRequest, 500);
}).blur(function () {
    stopTimeout();
    doRequest();
});

Asдругие заявили, что проверка на недопустимые символы и т. д. должна выполняться как на стороне клиента, так и на стороне сервера, поскольку вы не можете доверять клиенту.

Answer 2

Проверка действительного имени пользователя - единственный путь, так как ему нужно будет перейти в вашу базу данных.Я бы предложил добавить в javascript логику для проверки недопустимых символов, а затем проверять только доступное и действительное имя пользователя onblur. Таким образом, вам нужно будет только делать запрос каждый раз, когда пользователь щелкает поле.

Конечно, хотя вы помещаете свою проверку в js, вы все равно должны проверить это в php

Answer 3

Благодаря @elusive я нашел следующее решение:

jQuery.fn.inlineValidation = function() {
    return this.each(function() {
        var input = $(this);
        var timeoutId = 0;
        $(this).bind('keyup', function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function() {
                var value = input.val();
                $.getJSON('/ajax/user_name.php', { 'user_name': value }, function(data) {
                    if (data.success === true) {
                        input.next('.form_feedback').removeClass('error').addClass('success').text(data.message);
                    } else {
                        input.next('.form_feedback').removeClass('success').addClass('error').text(data.message);
                    }
                });
            }, 1000);
        });
    });
};

Answer 4

Все проверки (недопустимые символы, длина и т. Д.) Должны выполняться на стороне клиента и не должны запускаться на стороне сервера до отправки формы.

Проверка имени пользователя может быть выполнена в режиме реального времени через ajax. Если у вас нет действительно медленного сервера или большого количества пользователей, все будет хорошо.

Я бы не рекомендовал размытие с точки зрения юзабилити, скорее, onkeyup или попросить пользователя щелкнуть ссылку / кнопку рядом с полем.

Пользователи не обязательно знают, что они вызвали размытие (особенно, если размытие произошло в результате фокусировки на другом поле), поэтому они могут не иметь возможности выяснить, как повторить проверку снова, если Ajax вернется ошибка с их именем пользователя. Скорее объясните им, как они запускают Ajax.