Quelle est la meilleure méthode pour créer un gestionnaire de validation de nom d'utilisateur AJAX?

Question

Je suis en train de développer un site de réseautage social, et d'améliorer le front-end avec quelques crachats et vernis.

L'une des améliorations que j'implémente est un validateur AJAX pour les noms de discussion. La configuration est la suivante:

Le visiteur se dirige vers la page d'inscription et le visiteur tape le nom de son chat souhaité dans un champ. Lors de la frappe, l'utilisateur reçoit un retour instantané pour savoir si ce nom de chat est déjà utilisé, contient des caractères illégaux, est de la mauvaise longueur, etc.

J'ai le bon fonctionnement: j'ai créé un simple script PHP pour agir en tant que gestionnaire AJAX lié aux événements onkeyup et blur de mon entrée. Cependant, chaque requête implique une requête de base de données qui ne peut pas être bonne.

Ma question est: comment puis-je rationaliser cela? Sûrement une requête de base de données sur chaque onkeyup ou blur n'est pas une bonne idée?

Answer 1

Je recommande la stratégie suivante (en fonction du temps):

1. keyUp déclenche
2. Annuler délai d'attente (si l'on est en cours d'exécution à l'époque)
3. Démarrer un nouveau délai d'attente (500 - 1000 ms)
4. Est-ce que la demande lorsque le délai d'expiration

de cette façon, vous pouvez faire une demande à chaque fois que l'utilisateur cesse de taper pendant au moins 500 - 1000 Mme. Cela vous évite des requêtes pendant que l'utilisateur est encore en train de taper. Vous pouvez lancer la requête immédiatement lorsque l'événement blur-event est déclenché, puisque l'utilisateur ne tape plus, évidemment.

Exemple (en utilisant jQuery) avec 500 ms:

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(); 
}); 

Comme d'autres ont déclaré, la vérification des caractères invalides, etc. doit être fait côté client ainsi que côté serveur, puisque vous ne pouvez pas faire confiance au client .

Answer 2

La vérification d'un nom d'utilisateur valide est la seule façon dont il aura besoin pour accéder à votre base de données. Je suggère de mettre la logique pour vérifier les caractères invalides dans le javascript et ensuite seulement vérifier un nom d'utilisateur disponible et valide onblur, de cette façon, vous aurez seulement à faire une demande chaque fois que l'utilisateur clique loin du champ.

Bien sûr, bien que mettre votre validation dans les js, vous devriez toujours vérifier dans le php

Answer 3

Toutes la validation (caractères illégaux, longueur, etc.) doit être fait côté client et ne doit pas besoin de exécutez le côté serveur jusqu'à ce que le formulaire soit envoyé.

La vérification du nom d'utilisateur peut se faire en temps réel via ajax. Sauf si vous avez un serveur très lent ou une grande quantité d'utilisateurs, ça devrait aller.

Je ne recommanderais pas vraiment le flou d'un point de vue de la convivialité, plutôt onkeyup ou d'amener l'utilisateur à cliquer sur un lien/bouton à côté du champ.Les utilisateurs ne savent pas nécessairement qu'ils ont déclenché un flou (en particulier si le flou est dû à la focalisation sur un autre champ), ils ne peuvent donc pas savoir comment répéter le contrôle si l'ajax renvoie une erreur avec son nom d'utilisateur. Plutôt leur faire comprendre comment ils déclenchent l'ajax.

Answer 4

Merci à @elusive, je suis venu avec la solution suivante:

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); 
     }); 
    }); 
};