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

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

青灯夜游

Libérer： 2018-11-06 12:57:53

original

14950 Les gens l'ont consulté

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 ;

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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