interface Web
Tutoriel d'amorçage
Comment créer un indicateur de force de mot de passe en bootstrap
Comment créer un indicateur de force de mot de passe en bootstrap
La méthode de création d'un indicateur de force de mot de passe consiste à combiner HTML, CSS et JavaScript avec des commentaires en temps réel sur la force du mot de passe. 1. Utilisez Bootstrap pour créer une structure HTML contenant la boîte d'entrée de mot de passe et la barre de progression; 2. Écoutez les événements d'entrée via JavaScript, évaluez la force du mot de passe en fonction de cinq conditions: longueur, lettres en majuscules et en majuscules, chiffres et caractères spéciaux, et ajouter 20 points pour que chaque élément soit satisfait; 3. Mettez à jour dynamiquement la largeur de la barre de progression, les invites de couleur et de texte basées sur le score: les points inférieurs à 30 sont "faibles" (rouge), les points inférieurs à 30 sont "juste" (jaune), 60-80 sont "bons" (bleu) et supérieurs à 80 sont "forts" (vert); 4. Les optimisations facultatives incluent l'ajout de commutation de visibilité sur le mot de passe, la saisie de l'anti-titulaire, la vérification des listes d'exigences et la prévention des soumissions de mot de passe faibles, réalisant finalement la détection légère et réactive de la force de mot de passe sans bibliothèques supplémentaires.
La création d'un indicateur de force de mot de passe dans Bootstrap implique de combiner HTML, CSS et JavaScript pour fournir des commentaires en temps réel en tant qu'utilisateur tape leur mot de passe. Alors que Bootstrap fournit le cadre de mise en page et de style, vous aurez besoin de logique JavaScript personnalisée pour évaluer la force du mot de passe et mettre à jour l'interface utilisateur en conséquence.
Voici un moyen pratique de créer un indicateur de force de mot de passe réactif et visuellement clair à l'aide de Bootstrap 5.
1. Configurez la structure HTML avec bootstrap
Commencez avec une entrée de formulaire et une barre de progression ou une zone d'indicateur stylisé avec des composants bootstrap.
<! Doctype html>
<html lang = "en">
<adal>
<meta charset = "utf-8" />
<meta name = "Viewport" content = "width = device-width, initial-scale = 1.0" />
<Title> Indicateur de résistance du mot de passe </TITAL>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "Stylesheet" />
</ head>
<body>
<div class = "contener mt-5" style = "max-width: 400px;">
<div class = "MB-3">
<étiquette pour = "mot de passe" class = "form-label"> Mot de passe </ label>
<input type = "mot de passe" class = "form-control" id = "mot de passe" placeholder = "entrez le mot de passe" />
</div>
<! - Indicateur de force ->
<div class = "MB-3">
<small> Force de mot de passe </small>
<div class = "Progress MB-2">
<div id = "fortebar" class = "progress-bar" role = "progressbar" style = "width: 0%"> </div>
</div>
<small id = "résistance" class = "Text-MUTED"> Entrez un mot de passe </small>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </ script>
<cript>
// javascript ira ici
</cript>
</docy>
</html>2. Ajouter JavaScript pour évaluer la force du mot de passe
Utilisez un écouteur d'événements sur l'entrée du mot de passe pour vérifier la force en tant qu'utilisateur. La logique peut évaluer les critères comme la longueur, l'utilisation des nombres, les caractères spéciaux, les majuscules et les minuscules.
const MotwordSwayInput = document.getElementById («mot de passe»);
const Strengthbar = document.getElementById («Forcebar»);
const StrengtExt = document.getElementById ('ForcestExt');
// fonction pour évaluer la force du mot de passe
Fonction CheckPasswordStringth (mot de passe) {
Soit la force = 0;
const vérifies = {
longueur: mot de passe.length> = 8,
uppercase: /*AZ
minuscules: /*AZ LABALD /.TEST(PASSWORD),
numéro: /\d/.test(password),
Special: /*!@#$%^&*(),.
};
// ajouter des points pour chaque critère rempli
if (cords.length) résistance = 20;
if (cords.uppercase) résistance = 20;
if (cords.lowercase) résistance = 20;
if (chots.number) résistance = 20;
if (chots.special) résistance = 20;
// Retourne la force, le texte et la couleur
if (force <30) {
return {force, texte: 'faible', couleur: 'bg-danger'};
} else if (force <60) {
return {force, texte: 'Fair', couleur: 'bg-warning'};
} else if (force <80) {
return {force, texte: 'bon', couleur: 'bg-info'};
} autre {
return {Strength, Text: 'Strong', Color: 'BG-Success'};
}
}
// Mettez à jour l'indicateur sur l'entrée
PasswordInput.adDeventListener ('Input', fonction () {
const valum = this.value;
if (value === '') {
Forcedbar.style.width = '0%';
Strengthbar.classname = 'Progress-Bar';
résistation.TextContent = «Entrez un mot de passe»;
résistation.className = 'Text-Muted';
retour;
}
const result = checkPasswordStherch (value);
Forcedbar.style.width = result.strength '%';
Resistbar.classname = 'Progress-Bar' result.color;
résistation.TextContent = result.Text;
résistation.classname = result.color.replace ('bg-', 'text-');
});3. Comment fonctionne l'indicateur
- Bar de progression : montre visuellement à quel point le mot de passe est solide sur les critères.
- Retour de texte : affiche "faible", "juste", "bon" ou "fort".
- Codage couleur :
- Rouge (
bg-danger) pour faible - Jaune (
bg-warning) pour la foire - Blue (
bg-info) pour de bon - Vert (
bg-success) pour fort
- Rouge (
Vous pouvez ajuster la logique de notation ou les seuils en fonction de vos exigences de sécurité.
Améliorations facultatives
- Ajoutez un mot à visibilité sur le mot de passe (icône des yeux) à l'aide de groupes d'entrée bootstrap.
- Déboucissez l'événement d'entrée pour les performances si nécessaire.
- Inclure des toolstips ou une liste de contrôle des exigences.
- Empêchez la soumission du formulaire si le mot de passe est trop faible (ajoutez la validation).
Cette configuration offre aux utilisateurs des commentaires visuels immédiats - améliorant la convivialité et la sécurité. Il est léger, fonctionne avec Bootstrap standard et ne nécessite pas de bibliothèques supplémentaires.
Fondamentalement, connectez simplement l'événement d'entrée à une fonction de notation et mettez à jour la barre de progression et le texte en conséquence.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Stock Market GPT
Recherche d'investissement basée sur l'IA pour des décisions plus intelligentes
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer un pied de page collant en bootstrap
Sep 16, 2025 am 06:00 AM
À l'aide de la disposition Flexbox, définissez le HTML et la hauteur du corps à 100% et ajoutez les classes D-Flex, Flex-Colonne et Min-VH-100 au conteneur; 2. Ajoutez des classes Flex-Grow-1 à l'élément principal pour occuper l'espace restant, poussant ainsi le pied de page vers le bas; 3. Le pied de page est naturellement à la fin du contenu et colle le bas en cas de contenu court et se déplace avec le document lorsqu'il est un contenu long; Cette méthode ne nécessite pas de javascript ou de hauteur fixe supplémentaire, et est compatible avec la conception réactive et est simple et fiable.
Comment utiliser un groupe de liste d'amorçage pour la navigation
Sep 21, 2025 am 06:31 AM
Oui, ListGroup de Bootstrap peut être utilisé comme navigation. 1. Utilisez des classes de groupes de groupe et de groupe de liste pour ajouter des effets visuels cliquables et des états interactifs à chaque projet; 2. Utilisez des classes actives pour identifier l'emplacement actuel en ajoutant des classes actives aux liens de la page actuelle; 3. Ajouter éventuellement des icônes ou des badges pour améliorer l'affichage des informations; 4. Utiliser éventuellement JavaScript pour changer dynamiquement d'états actifs pour réaliser la navigation dans des applications à une seule page; 5. Placer les groupes de liste dans les dispositions réactives telles que les barres latérales et les combiner avec des grilles ou des dispositions élastiques pour atteindre la structure globale de la page; Lorsque des éléments de navigation au niveau du bloc et de l'espacement sont requis, les groupes de liste sont préférés.
Comment utiliser des alertes bootstrap et les rendre licencies?
Sep 17, 2025 am 08:57 AM
Les alertes bootstrap peuvent être désactivées en ajoutant des classes spécifiques et une prise en charge JavaScript. 1. Créer des alertes de base avec des classes. Alert et de contexte telles que. 2. Ajouter des classes. 3. Ajoutez des boutons avec .Btn-Close Class et Data-Bs-Dismiss = "Alert" Attributs aux alertes pour atteindre la fonction d'arrêt; 4. Assurez-vous que le bundle JavaScript bootstrap est introduit pour activer le comportement de fermeture; 5. Ajouter éventuellement des icônes ou écouter fermé.B
Comment changer les couleurs du thème par défaut dans Bootstrap?
Sep 16, 2025 am 01:42 AM
TOCHANGEDEFAULTTHEMECOLORSINBOOTSTRAP5, utilise la STOoverridevariables Like $ primaireforeImporttingBootstrap; 2.UpdateThe $ $-colorsmaptoAddorModifyColorsSuchas "Soulignez"
Comment utiliser Bootstrap avec Vue.js?
Sep 18, 2025 am 04:33 AM
Usebootstrap5asitisjquery-free and compatiblewithvue; 2.InstallbootstrapvianPandImPortitscsinyourmainFileForStyling; 3.ApplybootstrapClassDirectlyInvueTEmplatesForlayoutandDesign; 4.Optionally utilisentrap-vue-3forvue3ToAccessSnativeVuEComponontsLitsLits-Vue-3Forvue3ToAccessSnativeVuuSLiBentestprap-Vue-3forvue3ToAccessSnativeVuuSLiKentsLikEnTrap-Vue-3forvue3ToaccessNativeVuuSLiKEANTSLIKEANT-ARRIC
Comment utiliser les utilitaires bootstrap pour les ombres
Sep 20, 2025 am 04:01 AM
Bootstrap fournit trois classes d'ombre: 1..Shadow-SM est utilisée pour les ombres faibles, 2..Shadow est utilisé pour les ombres standard et 3..shadow-lg est utilisé pour les grandes ombres. Il peut être directement appliqué à des éléments tels que des cartes et des boutons pour augmenter la hiérarchie visuelle. Il est nécessaire d'assurer la visibilité avec des couleurs d'arrière-plan telles que BG-White; 4. Utilisez .shadow-none pour supprimer les ombres par défaut; 5. Des ombres réactives peuvent être réalisées grâce à CSS personnalisée. La sélection correcte des ombres peut rapidement améliorer la trois dimensionnalité des éléments et maintenir la cohérence de la conception, et finalement améliorer la profondeur de l'interface de manière simple, se terminant de manière complète.
Comment créer une liste déroulante à plusieurs niveaux en bootstrap
Sep 20, 2025 am 04:08 AM
Pour créer un menu déroulant à plusieurs niveaux pour BootStrap5, vous devez combiner l'implémentation CSS et JavaScript personnalisés; 1. Utilisez une structure déroulante standard et un sous-menu avec une classe Dropdown-SubMenu; 2. Ajouter un sous-menu de positionnement CSS (comme à gauche: 100%) et éventuellement ajouter des styles de flèches; 3. Utilisez JavaScript pour empêcher les événements de bouillonner et de changer d'affichage sous-menu, ou d'utiliser: Trig à partir; 4. Assurez-vous que le CSS et le JSCDN de Bootstrap5.3.2 sont introduits; Faites attention à l'expérience mobile et au support d'accessibilité des attributs ARIA et réalisez enfin le menu déroulant à plusieurs niveaux disponible sur les appareils.
À quoi sert Popper.js pour Bootstrap?
Sep 18, 2025 am 04:14 AM
Popper.jsissentialforbootstrapBecauseitAutomAticalPositionStoolTips, popovers et DROPDOWNSTOENSURETHEYREMAINvisibleandProperlyaligned.1.itdynamicallycalculatesthebestplacerselatrelatoTRIGH
