首页 > 代码库 > 密码强度验证

密码强度验证

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.passport-form .form-cont {
position: relative;
line-height: 26px;
}
.passport-form .passport-txt {
position: relative;
z-index: 10;
color: #666;
font-size: 12px;
}

.passport-txt.w-full {
width: 100%;
}
.passport-txt.xl {
height: 40px;
padding: 11px;
font-size: 14px;
line-height: 18px;
}
.passport-txt {
width: 100px;
height: 26px;
padding: 5px;
font-size: 12px;
line-height: 16px;
border: 1px solid #e4e4e4;
border-color: #e4e4e4;
-webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-moz-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.passport-safely {
margin-top: 10px;
}
ol, ul {
list-style: none;
}
.passport-safely.safely-general .danger, .passport-safely.safely-general .general {
background-color: #ff5c00;
}
.passport-safely li {
float: left;
width: 60px;
height: 14px;
margin-right: 4px;
background-color: #ddd;
color: #fff;
font-size: 12px;
line-height: 14px;
text-align: center;
cursor: default;
}
.passport-safely.safely-general .danger, .passport-safely.safely-general .general {
background-color: #ff5c00;
}
.passport-safely.safely-danger .danger {
background-color: #da4619;
}
</style>
<script type="text/javascript" src="http://www.mamicode.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/‘code.js‘></script>
</head>
<body>
<div class="form-item">
<div class="form-cont" id="form">
<input type="password" name="password" class="passport-txt xl w-full" tabindex="2" autocomplete="off" placeholder="输入6~32位密码">
<ul class="passport-safely " id="safely">
<li class="danger">弱</li>
<li class="general">中</li>
<li class="safe">高</li>
</ul>
</div>
</div>
</body>
</html>

  1 /***/
  2 var SING = {
  3     init:function(){
  4         this.register(‘#form‘)
  5 
  6     },
  7     register:function(form){
  8         var $form =$(form)
  9         var $pwd = $form.find(‘input[name="password"]‘);
 10             $pwd.passportPasswordStrong($(‘#safely‘));
 11     }
 12 
 13 };
 14 
 15 
 16 
 17 
 18 (function($) {
 19     // 密码强度
 20     $.fn.passportPasswordStrong = function(elem) {
 21         var passwordSafe = {
 22             safe: function(val) {
 23                 if (val == ‘‘) return 0;
 24                 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
 25                 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
 26                 var enoughRegex = new RegExp("(?=.{6,}).*", "g");
 27                 if (enoughRegex.test(val) == false) {
 28                     return 1;
 29                 } else if (strongRegex.test(val)) {
 30                     return 3;
 31                 } else if (mediumRegex.test(val)) {
 32                     return 2;
 33                 } else {
 34                     return 1;
 35                 }
 36                 return false;
 37             },
 38             state: function(elem, level, stateclass) {
 39                 var $elem = elem;
 40                 var stateClass = stateclass[0] + ‘ ‘ + stateclass[1] + ‘ ‘ + stateclass[2];
 41                 switch (level) {
 42                     case 1:
 43                         $elem.removeClass(stateClass).addClass(stateclass[0]);
 44                         break;
 45                     case 2:
 46                         $elem.removeClass(stateClass).addClass(stateclass[1]);
 47                         break;
 48                     case 3:
 49                         $elem.removeClass(stateClass).addClass(stateclass[2]);
 50                         break;
 51                     case 0:
 52                         $elem.removeClass(stateClass);
 53                         break;
 54                 }
 55             }
 56         };
 57         var $this = $(this);
 58         $this.bind(‘keyup‘, function() {
 59             var val = $.trim($this.val());
 60             var level = passwordSafe.safe(val);
 61             passwordSafe.state(elem, level, [‘safely-danger‘, ‘safely-general‘, ‘safely-safe‘]);
 62         });
 63     };
 64     // placeholder
 65     $.fn.passportPlaceholder = function(holderclass) {
 66         var isIE9 = navigator.userAgent.indexOf(‘MSIE 9.0‘) > -1;
 67         var $this = $(this);
 68         if (isIE9) {
 69             $this.each(function() {
 70                 var $this = $(this);
 71                 var holder = $this.attr(‘placeholder‘);
 72                 var holderHtml = ‘<div class="js-placeholder">‘ + holder + ‘</div>‘;
 73                 $this.addClass(holderclass).attr(‘autocomplete‘, ‘off‘).before(holderHtml);
 74 
 75                 if ($this.val()) {
 76                     $this.removeClass(holderclass).siblings(‘.js-placeholder‘).hide();
 77                 }
 78 
 79                 $this.bind(‘focus‘, function() {
 80                     $(this).removeClass(holderclass).siblings(‘.js-placeholder‘).hide();
 81                 });
 82                 $this.bind(‘blur‘, function() {
 83                     var $this = $(this);
 84                     if (!$this.val()) $this.addClass(holderclass).siblings(‘.js-placeholder‘).show();
 85                 });
 86             });
 87         } else {
 88             $this.each(function() {
 89                 var $this = $(this);
 90                 $this.removeClass(‘placeholder‘).attr({‘autocomplete‘: ‘off‘});
 91             });
 92         }
 93 
 94         return this;
 95     };
 96     $.fn.passportSetBtnTimer = function(options) {
 97         "use strict";
 98         var settings = $.extend({
 99             ‘time‘: 60,
100             ‘timewhich‘: null,
101             ‘timetext‘: null,
102             ‘timerstart‘: null,
103             ‘timerend‘: null,
104             ‘callback‘: null
105         }, options);
106 
107         var self = this,
108             oldv = self.text(),
109             lock = 0,
110             timer;
111 
112         if (settings.timerstart) settings.timerstart(this);
113         this.attr("disabled", "disabled");
114         // 设置手机号码不可修改
115         this.parents(‘.passport-form‘).find(‘input[name="phone"]‘).attr({‘readonly‘: ‘readonly‘});
116 
117         var text = settings.timetext ? settings.timetext : ‘s后重新获取‘;
118         var tick = function() {
119             settings.time--;
120             if (settings.timewhich) {
121                 settings.timewhich.text(settings.time + text);
122             } else {
123                 self.text(settings.time + text);
124             }
125             if (settings.time < 1) {
126                 if (settings.timerend) {
127                     settings.timerend(self);
128                     self.parents(‘.passport-form‘).find(‘input[name="phone"]‘).removeAttr(‘readonly‘);
129                     window.clearInterval(timer);
130                 } else {
131                     self.removeAttr("disabled");
132                     self.parents(‘.passport-form‘).find(‘input[name="phone"]‘).removeAttr(‘readonly‘);
133                     window.clearInterval(timer);
134                     self.text(‘重新发送‘);
135                 }
136                 if (settings.callback) settings.callback();
137             }
138         };
139         if (lock == 0) {
140             settings.time++;
141             tick();
142             lock == 1;
143         }
144         return this.each(function() {
145             timer = window.setInterval(tick, 1000);
146         });
147     }
148 })(jQuery);
149 
150 $(function(){
151     SING.init();
152 })

 

密码强度验证