js密码强度-学到老web开发

js密码强度

发表于:2015-08-12 14:42:39 | 1046次阅读| 作者:js,javascript

摘要：1 /* 2 *密码安全程度 3 *return 1 ：全部为字母或者数字,或者密码长度小于6 4 *return 2 : 字母数字组成，或者字母特殊字符，或者数字和特殊字符 5 *return 3 : 字母和数字和特殊字符 6 */ 7 String.prototype.passwordStr.....

011 /*
02*密码安全程度 
03*return 1 ：全部为字母或者数字,或者密码长度小于6
04*return 2 : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
05*return 3 : 字母和数字和特殊字符
06*/
07String.prototype.passwordStrength=function(){
08    if(this.length>0 && this.length<=6) return 1;
09    var n1 = (this.search(/[a-zA-Z]/) != -1) ? 1 : 0,
10    n2 = (this.search(/[0-9]/) != -1) ? 1 : 0,
11    n3 =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{1,}/) != -1) ? 1 : 0; 
12    return n1+n2+n3;
13}

demo

011 <!doctype html>
02<html>
03 
04<head>
05<meta charset="utf-8">
06<title>js密码强度</title>
07<style type="text/css">
08.pw_letter{ margin-top:5px; font-size: 12px; }
09.pw_letter label{float: left; margin-right:10px; cursor: default; font-size: 12px; line-height: 16px;;}
10.pw_letter span{ float: left; display:inline-block; width:30px; height:16px; line-height:16px; text-align:center; color:#FFF; background-color:#ccc; border-left: 1px solid #FFF;}
11.pw_letter span.pw_strength_color{ background-color:green;}
12 
13</style>
14</head>
15 
16<body>
17 
18<input id="password" type="password" name="password" placeholder="密码" onKeyUp="setPasswordStrength(this.value.trim())">
19<div class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </div>
20 
21 
22<script type="text/javascript">
23/*
24*密码安全程度 
25*return 1 ：全部为字母或者数字,或者密码长度小于6
26*return 2 : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
27*return 3 : 字母和数字和特殊字符
28*/
29String.prototype.passwordStrength=function(){
30    if(this.length>0 && this.length<=6) return 1;
31    var n1 = (this.search(/[a-zA-Z]/) != -1) ? 1 : 0,
32    n2 = (this.search(/[0-9]/) != -1) ? 1 : 0,
33    n3 =(this.search(/[\~\`\!\@\#\$\%\^\&\*\(\)\_\+\-\=\[\]|{\}\;\'\:\"\,\.\/\<\>\?]{1,}/) != -1) ? 1 : 0; 
34    return n1+n2+n3;
35}
36 
37String.prototype.trim = String.prototype.trim || function(){
38    return this.replace(/^\s+|\s+$/g,"");
39}
40 
41function setPasswordStrength(pwd){
42    var strength_span = document.getElementsByClassName("strength");
43    for(var i=0; i<strength_span.length; i++){
44        strength_span.item(i).className="strength"; 
45    }
46    for(var i=0; i<pwd.passwordStrength(); i++){
47        document.getElementsByClassName("strength").item(i).className="strength pw_strength_color";
48    }    
49}
50 
51 
52</script>
53</body>
54 
55</html>

View Code