Le plug-in jQuery implémente le code de vérification HTML statique vérification_jquery

jQuery a été créé par l'Américain John Resig. C'est une bibliothèque JavaScript rapide et concise qui fournit de nombreuses fonctions de traversée, telles que each(fn). jQuery peut séparer le code et le contenu HTML de la page HTML de l'utilisateur, c'est-à-dire qu'il n'est pas nécessaire d'insérer un tas de js dans le HTML pour appeler la commande. Ce sont ces caractéristiques opérationnelles qui permettent aux utilisateurs de traiter facilement des documents HTML, des événements, de mettre en œuvre des effets d'animation et de fournir facilement des interactions pour les sites Web. Aujourd’hui, jQuery a attiré de nombreux experts JavaScript du monde entier.

Le plug-in jQuery Real Person dont nous allons parler ici est un plug-in de code de vérification jQuery entièrement écrit en JavaScript.

jQuery Real Person Plugin implémente principalement deux méthodes de vérification : lettres et lettres et chiffres mélangés, qui peuvent empêcher efficacement la soumission automatique formulaire. Son affichage d'apparence offre des fonctions de personnalisation. La valeur par défaut est des lettres à 6 chiffres, comme le montre la figure 1.

Selon les besoins, vous pouvez également personnaliser un code de vérification à 8 chiffres, comme le montre la figure 2.

Ou un code de vérification alphanumérique mixte, comme le montre la figure 3.

De plus, les utilisateurs peuvent également personnaliser le texte en bas, comme le montre la figure 4.

Au vu de ces interfaces de vérification uniques et puissantes, pouvons-nous les mettre en œuvre nous-mêmes ? La réponse est oui. Ci-dessous, nous analyserons le processus de vérification du plugin jQuery Real Person à travers une explication étape par étape.
Étape 1, avant d'utiliser cette fonction de vérification, introduisez les fichiers JavaScript et CSS.

<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>

Dans le code ci-dessus, la ligne 1 présente la bibliothèque de classes jQuery. Vous pouvez télécharger la dernière bibliothèque de classes jQuery sur le site officiel. La ligne 2 présente la bibliothèque de plug-ins de code de vérification jquery.realperson.js. La ligne 3 présente le fichier de style de code de vérification jquery.realperson.css. L'interface du site Web est illustrée à la figure 5.

Étape 2, placez l'élément de zone de texte dans la page, qui est la partie HTML.

<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登录" /></td>
</tr>
</table>

Dans le code ci-dessus, la ligne 1 utilise deux lignes et une colonne pour la mise en page, une ligne est utilisée pour stocker la zone de texte et une ligne est utilisée pour stocker le bouton de connexion. La ligne 3 définit la zone de texte avec id="txtValidate" pour saisir le code de vérification. La ligne 6 définit le bouton de soumission avec id="btnSubmit", qui est utilisé pour déclencher des événements en arrière-plan pour se connecter au système.
Étape 3 : Lorsque la page est initialisée, appelez le plug-in du code de vérification pour initialiser l'affichage du code de vérification.

<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>

Dans le code ci-dessus, la deuxième ligne est l'opération effectuée lors du chargement de la page, ce qui équivaut à l'événement onLoad de la page. La ligne 3 appelle l'interface du contrôle du code de vérification pour afficher le code de vérification.
Étape 4, analyse du code de base.

/* 核心代码
@param target (jQuery) the input field
@param inst  (object) the current instance settings
@return (string) the additional content */
_generateHTML: function(target, inst) {
var text = '';
for (var i = 0; i < inst.settings.length; i++) {
text += CHARS.charAt(Math.floor(Math.random() *
(inst.settings.includeNumbers &#63; 36 : 26)));
}
 var html = '<div class="realperson-challenge"><div class="realperson-text">';
 for (var i = 0; i < DOTS[0].length; i++) {
 for (var j = 0; j < text.length; j++) {
 html += DOTS[CHARS.indexOf(text.charAt(j))][i] + ' ';
}
html += '\n';
}
html += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;

Dans le code ci-dessus, les lignes 7 à 9 sont utilisées pour générer des caractères aléatoires du code de vérification. Les lignes 12 à 22 sont utilisées pour assembler des caractères d'arrière-plan et des caractères aléatoires dans du code HTML et les afficher dans le navigateur.

Grâce à l'analyse ci-dessus, nous pouvons voir que les codes de vérification jouent un rôle très important dans la sécurité des mots de passe. En pensant aux problèmes de sécurité des comptes bancaires, par exemple, un pirate informatique obtient un compte bancaire par d'autres moyens puis ouvre l'interface de connexion de sa banque en ligne. Utilisez la méthode de visualisation du code source dans le navigateur pour analyser le code HTML de l'interface de connexion. Il s'avère qu'il n'y a aucun code de vérification et aucun autre paramètre de sécurité dans la page. Seul le protocole HTTP est utilisé. , afin qu'il puisse utiliser un programme pour simuler la demande du navigateur. Le serveur de la banque lui soumet le compte et le mot de passe. Le mot de passe est généralement un chiffre arabe à 6 chiffres et la possibilité d'un mot de passe correct est de 10 à la puissance 6, soit 1 million de fois. Un pirate trouvera un ordinateur hautes performances et à large bande passante et exécutera un programme pour extraire les mots de passe bancaires. En supposant que cet ordinateur puisse tester 10 mots de passe en une seconde, cela prendra 100 000 secondes (soit 27 heures, environ une journée). Parcourez tous les mots de passe. En fait, le pirate informatique ne mettra pas beaucoup de temps à voler le mot de passe et l'argent du compte bancaire sera transféré. En d’autres termes, s’il n’y a pas de code de vérification, les pirates peuvent facilement obtenir des revenus illégaux en un jour ou deux en utilisant le programme pour obtenir les mots de passe bancaires.

Dans les applications pratiques, le code de vérification des caractères chinois est également un code de vérification relativement courant. Son principe est le suivant : sélectionner aléatoirement plusieurs caractères chinois dans un jeu de caractères chinois, générer une image et la diffuser sur la page via une sortie HTTP. Si le client saisit des caractères chinois corrects, l'opération peut continuer, sinon la connexion est interdite. La Chine a cinq mille ans d'histoire, une culture vaste et profonde et plus de 90 000 caractères chinois. Comparé au code de vérification numérique à 10 chiffres et au code de vérification alphabétique à 26 caractères, le code de vérification à caractères chinois est plus sûr. Par conséquent, grâce à l'étude de la sécurité des codes de vérification, nous pouvons mieux apprécier la profondeur de la culture chinoise. Il s'avère que la vérification des mots de passe peut également être jouée de cette manière !

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.