recherche

Maison >interface Web >js tutoriel >Affichage du code JavaScript pour déterminer la force du mot de passe

Affichage du code JavaScript pour déterminer la force du mot de passe

巴扎黑
巴扎黑original
2017-09-14 12:00:121628parcourir

先看效果图：

javascript密码强度校验代码，具体实现思路不多说了，请看下面代码和demo。

第一种方法：

/*
 *密码安全程度 
 *return ：全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length<=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./<>?]{,}/) != -) ? : ; 
 return n+n+n;
 }

demo

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-">
 <title>js密码强度</title>
 <style type="text/css">
 .pw_letter{ margin-top:px; font-size: px; }
 .pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;}
 .pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#FFF; background-color:#ccc; border-left: px solid #FFF;}
 .pw_letter span.pw_strength_color{ background-color:green;}
 </style>
 </head>
 <body>
 <input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())">
 <p class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </p>
 <script type="text/javascript">
 /*
 *密码安全程度 
 *return ：全部为字母或者数字,或者密码长度小于
 *return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
 *return : 字母和数字和特殊字符
 */
 String.prototype.passwordStrength=function(){
 if(this.length> && this.length&lt;=) return ;
 var n = (this.search(/[a-zA-Z]/) != -) ? : ,
 n = (this.search(/[-]/) != -) ? : ,
 n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./&lt;>?]{,}/) != -) ? : ; 
 return n+n+n;
 }
 String.prototype.trim = String.prototype.trim || function(){
 return this.replace(/^s+|s+$/g,"");
 }
 function setPasswordStrength(pwd){
 var strength_span = document.getElementsByClassName("strength");
 for(var i=; i<strength_span.length; i++){
  strength_span.item(i).className="strength"; 
 }
 for(var i=; i<pwd.passwordStrength(); i++){
  document.getElementsByClassName("strength").item(i).className="strength pw_strength_color";
 } 
 }
 </script>
 </body>

第二种方法：

javascript代码如下：

&lt;script>
function AuthPasswd(string) {
 if(string.length >=6) {
 if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /W+D+/.test(string)) {
  noticeAssign(1);
 }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /W+D+/.test(string)) {
  if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
  noticeAssign(-1);
  }else if(/[a-zA-Z]+/.test(string) && /W+D+/.test(string)) {
  noticeAssign(-1);
  }else if(/[0-9]+/.test(string) && /W+D+/.test(string)) {
  noticeAssign(-1);
  }else{
  noticeAssign(0);
  }
 }
 }else{
 noticeAssign(null); 
 }
}
function noticeAssign(num) {
 if(num == 1) {
 $("#weak").css({backgroundColor:"#009900"});
 $("#middle").css({backgroundColor:"#009900"});
 $("#strength").css({backgroundColor:"#009900"});
 $("#strength").html("很强");
 $("#middle").html("");
 $("#weak").html("");
 }else if(num == -1){
 $("#weak").css({backgroundColor:"#ffcc33"});
 $("#middle").css({backgroundColor:"#ffcc33"});
 $("#strength").css({backgroundColor:""});
 $("#weak").html("");
 $("#middle").html("中");
 $("#strength").html("");
 }else if(num ==0) {
 $("#weak").css({backgroundColor:"#dd0000"});
 $("#middle").css({backgroundColor:""});
 $("#strength").css({backgroundColor:""});
 $("#weak").html("弱");
 $("#middle").html("");
 $("#strength").html("");
 }else{
 $("#weak").html(" ");
 $("#middle").html(" ");
 $("#strength").html(" ");
 $("#weak").css({backgroundColor:""});
 $("#middle").css({backgroundColor:""});
 $("#strength").css({backgroundColor:""});
 }
}
&lt;/script>

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：
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
Article précédent：Exemple détaillé de la façon d'utiliser JavaScript pour randomiser l'index de valeur dans un tableau et créer un tableau aléatoireArticle suivant：Exemple détaillé de la façon d'utiliser JavaScript pour randomiser l'index de valeur dans un tableau et créer un tableau aléatoire

Articles Liés

Voir plus