首页 > 代码库 > 密码强度验证
密码强度验证
<!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 })
密码强度验证