jQueryパスワード強度チェッカー
私はjQueryにかなり慣れていないため、キーを押すたびにパスワードの強度をチェックする簡単な関数を作成しました。
ユーザーが文字を入力するたびに、内容が評価されて、ユーザーが入力したパスワードの強度がテストされるという考え方です...誰もがこれまでに見たことがあると思います。
とにかく、私が使用したロジックは、1の値で始まるパスワードがないことです。小文字が使用されると、スコアは2に増分します。数字が使用されると、スコアが1だけ増分されます。大文字の場合も同様です。文字を使用し、パスワードが5文字以上になる場合。
返されるのは、キーが押されるたびに1から5までの値までのパスワードの強度です。
だから、私の質問について。私が行った方法は、jQueryのようには見えません...ちょうど私がまっすぐなJavaScriptを行ったのと同じように。また、自分の論理についても考えていました。何かしたことや見落としたことはありますか？私より賢い人からの提案はありますか？
任意の提案やアドバイスをいただければ幸いです。
$(document).ready(function(){
$("#pass_strength").keyup(function() {
var strength = 1;
/*length 5 characters or more*/
if(this.value.length >= 5) {
strength++;
}
/*contains lowercase characters*/
if(this.value.match(/[a-z]+/)) {
strength++;
}
/*contains digits*/
if(this.value.match(/[0-9]+/)) {
strength++;
}
/*contains uppercase characters*/
if(this.value.match(/[A-Z]+/)) {
strength++;
}
alert(strength);
});
});
最良の方法は、TJBが提案するように既存のプラグインを使用することです。
コード自体についてのあなたの質問に関して、より良い方法はそのようにそれを書くことです：
var pass = "f00Bar!";
var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
if(pass.match(regexp))
strength++;
});
（構文エラーを修正するために変更されました。）
既存のjQueryパスワード強度プラグインを評価することをお勧めします。 （あなたが練習としてそれをしているのでなければ）
ここに私が見つけたいくつかのリンクがあります：
http://www.visual-blast.com/javascript/password-strength-checker/
http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/
Gsの回答に加えて、パスワードを一般的な辞書の単語と照合して（おそらくハッシュを使用して）確認する必要があります。そうでない場合、「Yellow1」のような弱いパスワードは、ロジックによって強力であると評価されます。
運動をしているなら
参照： パスワード強度インジケーター
使用されるjQueryコード（＃はベンジャミンのコードからの変更点を示します）
$.fn.passwordStrength = function( options ){
return this.each(function(){
var that = this;that.opts = {};
that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
that.div = $(that.opts.targetDiv);
that.defaultClass = that.div.attr('class');
that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;
v = $(this)
.keyup(function(){
if( typeof el == "undefined" )
this.el = $(this);
var s = getPasswordStrength (this.value);
var p = this.percents;
var t = Math.floor( s / p );
if( 100 <= s )
t = this.opts.classes.length - 1;
this.div
.removeAttr('class')
.addClass( this.defaultClass )
.addClass( this.opts.classes[ t ] );
})
# Removed generate password button creation
});
function getPasswordStrength(H){
var D=(H.length);
# Added below to make all passwords less than 4 characters show as weak
if (D<4) { D=0 }
if(D>5){
D=5
}
var F=H.replace(/[0-9]/g,"");
var G=(H.length-F.length);
if(G>3){G=3}
var A=H.replace(/\W/g,"");
var C=(H.length-A.length);
if(C>3){C=3}
var B=H.replace(/[A-Z]/g,"");
var I=(H.length-B.length);
if(I>3){I=3}
var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
if(E<0){E=0}
if(E>100){E=100}
return E
}
# Removed generate password function
};
$(document)
.ready(function(){
$('input[name="password2"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
});
JQueryを使用したくない場合は、次のようなものを使用できます。
function strengthResult(p) {
if(p.length<6 || p.length>18) {
return 'Passwords must be 6-18 characters';
}
var strength = checkStrength(p);
switch(true) {
case strength<=30:
return 'Password "'+p+'" ('+strength+') is Very Weak';
break;
case strength>30 && strength<=35:
return 'Password "'+p+'" ('+strength+') is Weak';
break;
case strength>35 && strength<=50:
return 'Password "'+p+'" ('+strength+') is below Average';
break;
case strength>50 && strength<=60:
return 'Password "'+p+'" ('+strength+') is almost Good';
break;
case strength>60 && strength<=70:
return 'Password "'+p+'" ('+strength+') is Good';
break;
case strength>70 && strength<=80:
return 'Password "'+p+'" ('+strength+') is Very Good';
break;
case strength>80 && strength<=90:
return 'Password "'+p+'" ('+strength+') is Strong';
break;
case strength>90 && strength<=100:
return 'Password "'+p+'" ('+strength+') is Very Strong';
break;
default:
return 'Error';
}
}
function strengthMap(w,arr) {
var c = 0;
var sum = 0;
newArray = arr.map(function(i) {
i = c;
//sum += w-2*i;
sum += w;
c++;
return sum;
});
return newArray[c-1];
}
function checkStrength(p){
var weight;
var extra;
switch(true) {
case p.length<6:
return false;
break;
case p.length>18:
return false;
break;
case p.length>=6 && p.length<=10:
weight = 7;
extra = 4;
break;
case p.length>10 && p.length<=14:
weight = 6;
extra = 3;
break;
case p.length>14 && p.length<=18:
weight = 5;
extra = 2.5;
break;
}
allDigits = p.replace( /\D+/g, '');
allLower = p.replace( /[^a-z]/g, '' );
allUpper = p.replace( /[^A-Z]/g, '' );
allSpecial = p.replace( /[^\W]/g, '' );
if(allDigits && typeof allDigits!=='undefined') {
dgtArray = Array.from(new Set(allDigits.split('')));
dgtStrength = strengthMap(weight,dgtArray);
} else {
dgtStrength = 0;
}
if(allLower && typeof allLower!=='undefined') {
lowArray = Array.from(new Set(allLower.split('')));
lowStrength = strengthMap(weight,lowArray);
} else {
lowStrength = 0;
}
if(allUpper && typeof allUpper!=='undefined') {
upArray = Array.from(new Set(allUpper.split('')));
upStrength = strengthMap(weight,upArray);
} else {
upStrength = 0;
}
if(allSpecial && typeof allSpecial!=='undefined') {
splArray = Array.from(new Set(allSpecial.split('')));
splStrength = strengthMap(weight,splArray);
} else {
splStrength = 0;
}
strength = dgtStrength+lowStrength+upStrength+splStrength;
if(dgtArray.length>0){
strength = strength + extra;
}
if(splStrength.length>0){
strength = strength + extra;
}
if(p.length>=6){
strength = strength + extra;
}
if(lowArray.length>0 && upArray.length>0){
strength = strength + extra;
}
return strength;
}
console.log(strengthResult('5@aKw1'));
console.log(strengthResult('5@aKw13'));
console.log(strengthResult('5@aKw13e'));
console.log(strengthResult('5@aKw13eE'));
console.log(strengthResult('5@aKw13eE!'));
console.log(strengthResult('5@aKw13eE!,'));
console.log(strengthResult('5@aKw13eE!,4'));
console.log(strengthResult('5@aKw13eE!,4D'));
console.log(strengthResult('5@aKw13eE!,4Dq'));
console.log(strengthResult('5@aKw13eE!,4DqJ'));
console.log(strengthResult('5@aKw13eE!,4DqJi'));
console.log(strengthResult('5@aKw13eE!,4DqJi#'));
console.log(strengthResult('5@aKw13eE!,4DqJi#7'));
console.log(strengthResult('5@aKw13eE!,4DqJJ#7'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#7'));
console.log(strengthResult('111111'));
console.log(strengthResult('1111111'));
console.log(strengthResult('11111111'));
console.log(strengthResult('111111111'));
console.log(strengthResult('1111111111'));
console.log(strengthResult('11111111111'));
console.log(strengthResult('111111111111'));
console.log(strengthResult('1111111111111'));
console.log(strengthResult('11111111111111'));
console.log(strengthResult('111111111111111'));
console.log(strengthResult('1111111111111111'));
console.log(strengthResult('11111111111111111'));
console.log(strengthResult('111111111111111111'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#71'));
console.log(strengthResult('11111'));上記のスニペットは、長さが6〜18文字のパスワードのパスワード強度を計算します。一意の各文字のデフォルト値は
- 7ポイントパスワード6〜10文字の場合
- 6ポイントパスワード10-14文字の場合
- 5ポイントパスワードが14-18文字の場合
パスワードで文字が繰り返されている場合、繰り返しごとに2ポイントが失われます。
以下の仕様が満たされると、追加のポイントが与えられます。
- パスワード6桁以上（2.5または3または4ポイントを追加）
- パスワード少なくとも1つの数字を含む（2.5または3または4ポイントを追加）
- パスワード少なくとも1つの特殊文字がある（2.5または3または4ポイントを追加）
- パスワード少なくとも1つの大文字と1つの小文字を含む（2.5または3または4ポイントを追加）
- パスワードの長さは8文字以上にする必要があります。
- 強度は長さとともに増加し、長いパスワードはより多くのポイントを持つ必要があります。
- ＃/ "などの特殊文字を含めます（または[a-Z0-9]以外の文字のみ）。
- 本当に長いパスワードの場合、この方法は遅くなる可能性があります。新しい文字をすべてテストして、パスワードがすでに備えている機能を備えた辞書を使用してみませんか。
このコードを試して、テキストボックスのパスワードを確認してください
<script>
$(document).ready(function()
{
$('#pwd').keyup(function()
{
$('#strength_message').html(checkStrength($('#pwd').val()))
})
function checkStrength(password)
{
var strength = 0
if (password.length < 6) {
$('#strength_message').removeClass()
$('#strength_message').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('weak')
return 'Weak'
}
else if (strength == 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('good')
return 'Good'
}
else
{
$('#strength_message').removeClass()
$('#strength_message').addClass('strong')
return 'Strong'
}
}
});
</script>
Html：
<center><form id="password-strength">
<label>Password : </label>
<input name="pwd" id="pwd" type="password"/>
<span id="strength_message"></span>
</form><br/>
ここのデモをチェックしてください
これが最善の方法です
function password_validate(txt) {
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
var val5 = 0;
var counter, color, result;
var flag = false;
if (txt.value.length <= 0) {
counter = 0;
color = "transparent";
result = "";
}
if (txt.value.length < 8 & txt.value.length > 0) {
counter = 20;
color = "red";
result = "Short";
} else {
document.getElementById(txt.id + "error").innerHTML = " ";
txt.style.borderColor = "grey";
var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
// document.getElementById("pass_veri").style.display="block";
var fletter = /[a-z]/;
if (fletter.test(txt.value)) {
val1 = 20;
} else {
val1 = 0;
}
//macth special character
var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
if (special_char.test(txt.value)) {
val2 = 30;
} else {
val = 0;
}
/*capital_letter*/
var cap_lett = /[A-Z]/;
if (cap_lett.test(txt.value)) {
val3 = 20;
} else {
val = 0;
}
/*one numeric*/
var num = /[0-9]/;
if (num.test(txt.value)) {
val4 = 20;
} else {
val4 = 0;
}
/* 8-15 character*/
var range = /^.{8,50}$/;
if (range.test(txt.value)) {
val5 = 10;
} else {
val5 = 0;
}
counter = val1 + val2 + val3 + val4 + val5;
if (counter >= 30) {
color = "skyblue";
result = "Fair";
}
if (counter >= 50) {
color = "gold";
result = "Good";
}
if (counter >= 80) {
color = "green";
result = "Strong";
}
if (counter >= 90) {
color = "green";
result = "Very Strong";
}
}
document.getElementById("prog").style.width = counter + "%";
document.getElementById("prog").style.backgroundColor = color;
document.getElementById("result").innerHTML = result;
document.getElementById("result").style.color = color;
}body {
font-family: 'Rajdhani', sans-serif;
background-color: #E4E4E4;
}
/* tooltip*/
.hint {
width: 258px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
left: 0px;
border: 1px solid #CC9933;
background-color: #FFFFCC;
display: none;
padding: 20px;
font-size: 11px;
}
.hint:before {
content: "";
position: absolute;
left: 100%;
top: 24px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 1px solid transparent;
border-left: 22px solid #CC9933;
}
.hint:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 1px solid transparent;
border-left: 20px solid #FFFFCC;
}
.parent {
position: relative;
}
.progress {
height: 7px;
}
#progres {
display: block;
}
p {
margin: 0px;
font-weight: normal;
}
.form-control {
width: none;
margin-left: 260px;
margin-top: 25px;
width: 200px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-lg-12 parent ">
<label class="hint" id="pass-hint">
Password Strength:<span id="result"></span>
<br>
<div class="progress" id="progres">
<div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
</div>
</div>
<p> passowrd must have atleast 8 charatcer</p>
</label>
<input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
oninput="password_validate(this);document.getElementById('progres').style.display='block';">
<i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
<span id="passerror" class="help-block error"></span>
</div>以下の完全なコードを見つけてください：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.complexify.min.js"></script>
HTML：
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4> Password strength check with jquery</h4>
<label>Enter Storng Password: </label>
<input type="password" id="pwd"><br/>
<progress style="margin-left:20%" value="0" max="100" id="pg"></progress> <span id="cpx">0%</span>
</div>
脚本
$(function(){
$("#pwd").complexify({}, function(valid, complexity){
//console.log("Password complexity: " + Math.round(complexity));
$("#pg").val(Math.round(complexity));
$("#cpx").html(Math.round(complexity)+'%');
});
});
作業用のソースコードを入力してください ここ
以下は、無料のパスワード強度/ポリシーのJQueryプラグイン検証ツールです。また、複数の言語で入力されたパスワードの検証もサポートしています（Unicodeでサポート）。多言語対応です。
このデモを試すことができます： http://www.gbin1.com/technology/democenter/20120903-jquery-plugin-complexify/ 、jqueryプラグインcomplexifyによって開発されました。かっこいい！
function strengthResult(p) {
if(p.length<6 || p.length>18) {
return 'Passwords must be 6-18 characters';
}
var strength = checkStrength(p);
switch(true) {
case strength<=30:
return 'Password "'+p+'" ('+strength+') is Very Weak';
break;
case strength>30 && strength<=35:
return 'Password "'+p+'" ('+strength+') is Weak';
break;
case strength>35 && strength<=50:
return 'Password "'+p+'" ('+strength+') is below Average';
break;
case strength>50 && strength<=60:
return 'Password "'+p+'" ('+strength+') is almost Good';
break;
case strength>60 && strength<=70:
return 'Password "'+p+'" ('+strength+') is Good';
break;
case strength>70 && strength<=80:
return 'Password "'+p+'" ('+strength+') is Very Good';
break;
case strength>80 && strength<=90:
return 'Password "'+p+'" ('+strength+') is Strong';
break;
case strength>90 && strength<=100:
return 'Password "'+p+'" ('+strength+') is Very Strong';
break;
default:
return 'Error';
}
}
function strengthMap(w,arr) {
var c = 0;
var sum = 0;
newArray = arr.map(function(i) {
i = c;
//sum += w-2*i;
sum += w;
c++;
return sum;
});
return newArray[c-1];
}
function checkStrength(p){
var weight;
var extra;
switch(true) {
case p.length<6:
return false;
break;
case p.length>18:
return false;
break;
case p.length>=6 && p.length<=10:
weight = 7;
extra = 4;
break;
case p.length>10 && p.length<=14:
weight = 6;
extra = 3;
break;
case p.length>14 && p.length<=18:
weight = 5;
extra = 2.5;
break;
}
allDigits = p.replace( /\D+/g, '');
allLower = p.replace( /[^a-z]/g, '' );
allUpper = p.replace( /[^A-Z]/g, '' );
allSpecial = p.replace( /[^\W]/g, '' );
if(allDigits && typeof allDigits!=='undefined') {
dgtArray = Array.from(new Set(allDigits.split('')));
dgtStrength = strengthMap(weight,dgtArray);
} else {
dgtStrength = 0;
}
if(allLower && typeof allLower!=='undefined') {
lowArray = Array.from(new Set(allLower.split('')));
lowStrength = strengthMap(weight,lowArray);
} else {
lowStrength = 0;
}
if(allUpper && typeof allUpper!=='undefined') {
upArray = Array.from(new Set(allUpper.split('')));
upStrength = strengthMap(weight,upArray);
} else {
upStrength = 0;
}
if(allSpecial && typeof allSpecial!=='undefined') {
splArray = Array.from(new Set(allSpecial.split('')));
splStrength = strengthMap(weight,splArray);
} else {
splStrength = 0;
}
strength = dgtStrength+lowStrength+upStrength+splStrength;
if(dgtArray.length>0){
strength = strength + extra;
}
if(splStrength.length>0){
strength = strength + extra;
}
if(p.length>=6){
strength = strength + extra;
}
if(lowArray.length>0 && upArray.length>0){
strength = strength + extra;
}
return strength;
}
console.log(strengthResult('5@aKw1'));
console.log(strengthResult('5@aKw13'));
console.log(strengthResult('5@aKw13e'));
console.log(strengthResult('5@aKw13eE'));
console.log(strengthResult('5@aKw13eE!'));
console.log(strengthResult('5@aKw13eE!,'));
console.log(strengthResult('5@aKw13eE!,4'));
console.log(strengthResult('5@aKw13eE!,4D'));
console.log(strengthResult('5@aKw13eE!,4Dq'));
console.log(strengthResult('5@aKw13eE!,4DqJ'));
console.log(strengthResult('5@aKw13eE!,4DqJi'));
console.log(strengthResult('5@aKw13eE!,4DqJi#'));
console.log(strengthResult('5@aKw13eE!,4DqJi#7'));
console.log(strengthResult('5@aKw13eE!,4DqJJ#7'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#7'));
console.log(strengthResult('111111'));
console.log(strengthResult('1111111'));
console.log(strengthResult('11111111'));
console.log(strengthResult('111111111'));
console.log(strengthResult('1111111111'));
console.log(strengthResult('11111111111'));
console.log(strengthResult('111111111111'));
console.log(strengthResult('1111111111111'));
console.log(strengthResult('11111111111111'));
console.log(strengthResult('111111111111111'));
console.log(strengthResult('1111111111111111'));
console.log(strengthResult('11111111111111111'));
console.log(strengthResult('111111111111111111'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#71'));
console.log(strengthResult('11111'));パスワードの強度は、特殊文字と数字の存在、パスワードの長さなど、いくつかのパラメータに代わってチェックする必要があります。
私はニースのデモで以下のチュートリアルを見つけました：
http://tinytute.com/2014/06/03/animated-password-strength-checker-quick-easy/
JQueryコードブロック：
$(document).ready(function(){
$("#textBox").keyup(function(){
var passWord = $("#textBox").val();
var passLength = passWord.length;
var specialFlag = 0;
var numberFlag = 0;
var numberGenerator = 0;
var total = 0;
if(/^[a-zA-Z0-9- ]*$/.test(passWord) == false) {
specialFlag =20;
}
if(passWord.match(/[0-9]/)) {
numberFlag = 25;
}
if(passLength>4&&passLength<=6){
numberGenerator =25;
}else if(passLength>=7&&passLength<=9){
numberGenerator =35;
}else if(passLength>9){
numberGenerator =55;
}else if(passLength>0&&passLength<=4){
numberGenerator =15;
}else{
numberGenerator =0;
}
total = numberGenerator + specialFlag + numberFlag;
if(total<30){
$('#progressBar').css('background-color','#CCC');
}else if(total<60&&total>=30){
$('#progressBar').css('background-color','#FF6600');
}else if(total>=60&&total<90){
$('#progressBar').css('background-color','#FFCC00');
}else if(total>=90){
$('#progressBar').css('background-color','#0f0');
}
$('#progressBar').css('width',total+'%');
});
});
これらのロジックのセットが問題を解決することを願っています
RnZ Code Labs は使いやすい Password Strength プラグインです。