Maison > Article > interface Web > js utilise des expressions régulières pour vérifier la force du mot de passe
js utilise des expressions régulières pour vérifier la force du mot de passe
- php中世界最好的语言original
- 2018-04-18 10:24:342065parcourir
Cette fois, je vais vous présenter les précautions pour utiliser des expressions régulières en js pour vérifier la force du mot de passe. Voici quelques cas pratiques. Examinons-les ensemble.
Le code spécifique est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码强度验证</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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Comment vue proxyTable implémente le débogage des requêtes inter-domaines de l'interface
Comment faire fonctionner la base de données mongodb dans Node.js
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!