Maison interface Web js tutoriel Comment effectuer une vérification simple du mot de passe sur le formulaire en js ? (exemple de code)

Comment effectuer une vérification simple du mot de passe sur le formulaire en js ? (exemple de code)

Nov 06, 2018 pm 12:57 PM
js 密码验证 表单验证

Ce que cet article vous apporte, c'est d'introduire js pour effectuer une simple vérification des mots de passe des formulaires ? (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Nous devons d’abord comprendre Comment saisir le mot de passe en toute sécurité ?

De nombreux sites Web nécessitent désormais une inscription, ce qui signifie que les utilisateurs doivent se voir attribuer un nom d'utilisateur et un mot de passe. Voici quelques étapes simples pour rendre le processus plus sûr.

Utilisez le type de saisie "mot de passe"

Utilisez au lieu de , car cela permet au navigateur (et à l'utilisateur) de savoir que le contenu de ce champ doit être protégé.

Le mot de passe n'apparaîtra pas à l'écran au fur et à mesure que vous tapez, et la plupart des navigateurs ne "se souviendront" pas non plus de la valeur saisie dans le champ du mot de passe comme les autres éléments du formulaire.

Dans certains cas, comme sur les appareils mobiles, l'affichage des mots de passe peut améliorer la convivialité sans compromettre la sécurité. Après tout, seul l'affichage du navigateur est obscurci et non les données transférées.

Confirmer la saisie du mot de passe

Étant donné que le type de saisie du mot de passe masque le texte saisi, vous devez demander à l'utilisateur de confirmer qu'il n'a pas commis d'erreur. Le moyen le plus simple est de saisir votre mot de passe deux fois et de vérifier s'ils sont identiques.

Une autre façon consiste à afficher ce qu'ils ont saisi dans le cadre de la "page de confirmation". Le problème ici est que votre mot de passe apparaît dans le navigateur, le cache du navigateur, les proxys, etc. Pour des raisons de sécurité, les mots de passe ne doivent jamais être affichés au format HTML ni envoyés par courrier électronique.

Appliquer des mots de passe « forts » (mots de passe complexes)

Si vous êtes préoccupé par la sécurité, vous devriez avoir une politique sur ce qui constitue un mot de passe valide. Certaines restrictions courantes sont :

1. Au moins n caractères

2. Une combinaison de caractères majuscules et minuscules ;

3.

4. Indépendant des autres données utilisateur (nom, adresse, nom d'utilisateur, ...

Laissant maintenant la dernière exigence car elle nécessite un script côté serveur, examinons les possibilités en utilisant le client) ; côté HTML et JavaScript.


Sécurité du serveur

Bien qu'avoir un mot de passe complexe soit une bonne première étape, des mesures supplémentaires doivent être prises sur le serveur pour le sauvegarder , pour empêcher les attaques par force brute. Une méthode populaire consiste à installer Fail2Ban pour surveiller les fichiers journaux et verrouiller les erreurs récurrentes. Bien entendu, cela ne fonctionne que si votre système de connexion signale les tentatives de connexion infructueuses dans le fichier journal du système. Sinon, votre application doit fournir cette fonctionnalité.

Les mots de passe doivent être stockés cryptés dans la base de données ou ailleurs, et toutes les sauvegardes doivent également être cryptées.


Utilisons

js pour implémenter une simple vérification de formulaire opération

Le formulaire suivant comporte trois champs de saisie : nom d'utilisateur, pwd1 et pwd2. Lorsque le formulaire est soumis, le script checkForm analyse la valeur d'entrée et renvoie vrai ou faux. Si une valeur fausse est renvoyée, la soumission du formulaire sera annulée.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			function checkForm(form) {
				if(form.username.value == "") {
					alert("错误:用户名不能为空!");
					form.username.focus();
					return false;
				}
				re = /^\w+$/;
				if(!re.test(form.username.value)) {
					alert("错误:用户名必须只包含字母、数字和下划线!");
					form.username.focus();
					return false;
				}

				if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
					if(form.pwd1.value.length < 6) {
						alert("错误:密码必须至少包含六个字符!");
						form.pwd1.focus();
						return false;
					}
					if(form.pwd1.value == form.username.value) {
						alert("错误:密码必须与用户名不同!");
						form.pwd1.focus();
						return false;
					}
					re = /[0-9]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误:密码必须包含至少一个数字(0至9)!");
						form.pwd1.focus();
						return false;
					}
					re = /[a-z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误:密码必须包含至少一个小写字母(a-z)!");
						form.pwd1.focus();
						return false;
					}
					re = /[A-Z]/;
					if(!re.test(form.pwd1.value)) {
						alert("错误:密码必须包含至少一个大写字母(A-Z)!");
						form.pwd1.focus();
						return false;
					}
				} else {
					alert("错误:请检查并确认您输入的密码是否一致!");
					form.pwd1.focus();
					return false;
				}

				alert("You entered a valid password: " + form.pwd1.value);
				return true;
			}
		</script>
	</head>

	<body>
		<form onsubmit="return checkForm(this);">
			<p>用户名: <input type="text" name="username"></p>
			<p>密 码: <input type="password" name="pwd1"></p>
			<p>确认密码: <input type="password" name="pwd2"></p>
			<p><input type="submit"></p>
		</form>
	</body>

</html>
Copier après la connexion
Rendu :


Comment effectuer une vérification simple du mot de passe sur le formulaire en js ? (exemple de code)

Lorsque les deux mots de passe que nous saisissons sont incohérents, une erreur sera signalée :

Comment effectuer une vérification simple du mot de passe sur le formulaire en js ? (exemple de code)

N'oubliez pas que comme JavaScript n'est pas disponible dans tous les navigateurs, vous devez également utiliser des scripts côté serveur pour valider toutes les données avant de les enregistrer dans une base de données ou ailleurs.

Résumé : 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.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser JS et Baidu Maps pour implémenter la fonction Map Pan Comment utiliser JS et Baidu Maps pour implémenter la fonction Map Pan Nov 21, 2023 am 10:00 AM

Comment utiliser JS et Baidu Map pour implémenter la fonction de panoramique de la carte Baidu Map est une plate-forme de services cartographiques largement utilisée, souvent utilisée pour afficher des informations géographiques, le positionnement et d'autres fonctions dans le développement Web. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de panoramique de la carte et fournit des exemples de code spécifiques. 1. Préparation Avant d'utiliser l'API Baidu Map, vous devez d'abord demander un compte de développeur sur Baidu Map Open Platform (http://lbsyun.baidu.com/) et créer une application. Création terminée

Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS Apr 03, 2024 am 11:55 AM

La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies avec PHP et JS Dec 17, 2023 pm 06:55 PM

Outils essentiels pour l'analyse boursière : découvrez les étapes pour dessiner des graphiques en bougies en PHP et JS. Des exemples de code spécifiques sont nécessaires. Avec le développement rapide d'Internet et de la technologie, le trading d'actions est devenu l'un des moyens importants pour de nombreux investisseurs. L'analyse boursière est une partie importante de la prise de décision des investisseurs, et les graphiques en bougies sont largement utilisés dans l'analyse technique. Apprendre à dessiner des graphiques en bougies à l'aide de PHP et JS fournira aux investisseurs des informations plus intuitives pour les aider à prendre de meilleures décisions. Un graphique en chandeliers est un graphique technique qui affiche les cours des actions sous forme de chandeliers. Il montre le cours de l'action

Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Comment créer un graphique en chandeliers boursiers en utilisant PHP et JS Dec 17, 2023 am 08:08 AM

Comment utiliser PHP et JS pour créer un graphique en bougies boursières. Un graphique en bougies boursières est un graphique d'analyse technique courant sur le marché boursier. Il aide les investisseurs à comprendre les actions de manière plus intuitive en dessinant des données telles que le prix d'ouverture, le prix de clôture, le prix le plus élevé et le prix le plus élevé. prix le plus bas des fluctuations du prix des actions. Cet article vous apprendra comment créer des graphiques en bougies boursières en utilisant PHP et JS, avec des exemples de code spécifiques. 1. Préparation Avant de commencer, nous devons préparer l'environnement suivant : 1. Un serveur exécutant PHP 2. Un navigateur prenant en charge HTML5 et Canvas 3.

Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte Nov 21, 2023 am 09:33 AM

Comment utiliser JS et Baidu Maps pour implémenter la fonction de carte thermique de carte Introduction : Avec le développement rapide d'Internet et des appareils mobiles, les cartes sont devenues un scénario d'application courant. En tant que méthode d'affichage visuel, les cartes thermiques peuvent nous aider à comprendre la distribution des données de manière plus intuitive. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de carte thermique de carte et fournit des exemples de code spécifiques. Travail de préparation : Avant de commencer, vous devez préparer les éléments suivants : un compte développeur Baidu, créer une application et obtenir l'AP correspondant

Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte Comment utiliser JS et Baidu Map pour implémenter la fonction de traitement des événements de clic sur la carte Nov 21, 2023 am 11:11 AM

Présentation de la façon d'utiliser JS et Baidu Maps pour implémenter les fonctions de traitement des événements de clic sur la carte : dans le développement Web, il est souvent nécessaire d'utiliser des fonctions de carte pour afficher la localisation géographique et les informations géographiques. Le traitement des événements de clic sur la carte est une partie couramment utilisée et importante de la fonction de carte. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de traitement des événements de clic de la carte et donne des exemples de code spécifiques. Étapes : Importez le fichier API de Baidu Map. Tout d’abord, importez le fichier de l’API Baidu Map dans le fichier HTML. Cela peut être réalisé via le code suivant :

Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Conseils de développement PHP et JS : maîtrisez la méthode de création de graphiques en bougies boursières Dec 18, 2023 pm 03:39 PM

Avec le développement rapide de la finance sur Internet, l'investissement en actions est devenu le choix de plus en plus de personnes. Dans le trading d'actions, les graphiques en bougies sont une méthode d'analyse technique couramment utilisée. Ils peuvent montrer l'évolution des cours des actions et aider les investisseurs à prendre des décisions plus précises. Cet article présentera les compétences de développement de PHP et JS, amènera les lecteurs à comprendre comment dessiner des graphiques en bougies boursières et fournira des exemples de code spécifiques. 1. Comprendre les graphiques en bougies boursières Avant de présenter comment dessiner des graphiques en bougies boursières, nous devons d'abord comprendre ce qu'est un graphique en bougies. Les graphiques en chandeliers ont été développés par les Japonais

Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones de carte Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones de carte Nov 21, 2023 am 10:53 AM

Comment utiliser JS et Baidu Maps pour implémenter la fonction de dessin de polygones cartographiques. Dans le développement Web moderne, les applications cartographiques sont devenues l'une des fonctions courantes. Dessiner des polygones sur la carte peut nous aider à marquer des zones spécifiques que les utilisateurs peuvent visualiser et analyser. Cet article explique comment utiliser JS et l'API Baidu Map pour implémenter la fonction de dessin de polygones de carte et fournit des exemples de code spécifiques. Tout d’abord, nous devons introduire l’API Baidu Map. Vous pouvez utiliser le code suivant pour importer le JavaScript de l'API Baidu Map dans un fichier HTML

See all articles