Maison >interface Web >js tutoriel >Exemple de fonction de vérification de la force du mot de passe implémentée par JS sur la base des compétences d'expressions régulières_javascript
Cet article présente principalement la fonction de vérification de la force du mot de passe implémentée par JS basée sur des expressions régulières, impliquant une réponse événement javascript et une traversée de caractères basée sur des règles régulières, un jugement et d'autres compétences opérationnelles connexes. Les amis intéressés par JavaScript peuvent se référer à cet article
Cet article décrit la fonction de vérification de la force du mot de passe implémentée par JS sur la base d'expressions régulières. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Le code spécifique est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>m.sbmmt.com 脚本之家</title>
</head>
<style type="text/css">
body {
background: #ccc;
}
label {
width: 40px;
display: inline-block;
}
span {
color: red;
}
.container {
margin: 100px auto;
width: 400px;
padding: 50px;
line-height: 40px;
border: 1px solid #999;
background: #efefef;
}
span {
margin-left: 30px;
font-size: 12px;
}
.wrong {
color: red
}
.right {
color: green;
}
.strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<body>
<p class="container">
<label>密码</label>
<input type="text" id="inp1" maxlength="16">
<!--<input type="password" id="inp1" maxlength="16"/>-->
<p class="pass-wrap">
<em>密码强度：</em>
<em id="strength"></em>
<p id="strengthLevel" class="strengthLv0"></p>
</p>
</p>
<script>
var regEx = /^[1-9]\d{4,9}$/; //匹配qq号
//找人
var inp1 = document.getElementById("inp1");
var strength = document.getElementById("strength");
var strengthLevel = document.getElementById("strengthLevel");
var arr = ["", "低", "中", "高"];
inp1.onkeyup = function () {
var level = 0;
if (/[1-9]/.test(this.value)) {
level++;
}
if (/[a-z]/.test(this.value)) {
level++;
}
if (/[^a-z1-9]/.test(this.value)) {
level++
}
if (this.value.length < 6) {
level = 0;
}
strength.innerHTML = arr[level];
strengthLevel.className = "strengthLv" + level;
};
/* inp1.onkeyup = function () {
var level = 0;
if (/[1-9]/.test(this.value)) {
level++;
}
if (/[a-z]/.test(this.value)) {
level++
}
if (/[^a-z0-9]/.test(this.value)) {
level++
}
if (inp1.value.length < 6) {
level = 0;
}
strengthLevel.className = "strengthLv"+level;
strength.innerHTML = arr[level];
};*/
</script>
</body>
</html>Ce qui précède est tout le contenu de cet article, j'espère qu'il pourra aidez tout le monde à apprendre ! !
Recommandations associées :
Explication détaillée des six types d'erreurs en JavaScript
Trois méthodes d'implémentation des fonctions définies par JavaScript
Comment générer aléatoirement un certain nombre de mots de passe en utilisant javascript
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!