Kiểm tra độ mạnh mật khẩu jQuery

Question

Tôi khá mới đối với jQuery và tôi đã viết một hàm đơn giản để kiểm tra độ mạnh của mật khẩu cho mỗi lần nhấn phím.

Ý tưởng là mỗi khi người dùng nhập một ký tự, nội dung được đánh giá để kiểm tra mức độ liên quan của mật khẩu mà họ đã nhập ... Tôi chắc chắn mọi người đã thấy những điều này trước đây. Tuy nhiên, logic tôi đã sử dụng là không có mật khẩu nào bắt đầu bằng giá trị 1. Khi sử dụng ký tự chữ thường, số điểm sẽ tăng lên 2. Khi một chữ số được sử dụng, số điểm sẽ tăng thêm 1 lần nữa, tương tự cho khi một ký tự chữ hoa được sử dụng và khi mật khẩu dài 5 ký tự trở lên.

Điều được trả về là độ mạnh của mật khẩu cho đến nay với giá trị từ 1 đến 5 mỗi lần nhấn một phím.

Vì vậy, về câu hỏi của tôi. Cách mà tôi đã thực hiện nó không có vẻ rất jQuery như ... gần như tôi cũng có thể vừa thực hiện javascript thẳng. Ngoài ra tôi đã tự hỏi về logic của tôi. Tôi đã làm bất cứ điều gì được thực hiện hoặc bỏ qua một cái gì đó? Bất kỳ lời đề nghị từ những người thông minh hơn bản thân mình?

Mọi đề xuất hoặc lời khuyên sẽ được đánh giá cao.

$(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); 
     }); 
    }); 

Answer 1

Cách tốt nhất là sử dụng plugin hiện có như TJB đã đề xuất.

Đối với câu hỏi của bạn về mã riêng của mình, một cách đẹp hơn là để viết nó như thế:

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++; 
}); 

(Modified để sửa lỗi cú pháp.)

Answer 2

• Chiều dài của mật khẩu phải có ít nhất 8 ký tự.
• Sức mạnh tăng theo chiều dài, mật khẩu dài hơn sẽ có nhiều điểm hơn.
• Bao gồm các ký tự đặc biệt như #/"và tương tự. (Hoặc chỉ bất kỳ ký tự nào khác ngoài [a-Z0-9])
• Đối với mật khẩu thực sự dài, phương pháp này có thể bị chậm. Tại sao bạn không chỉ kiểm tra mọi mới nhân vật và sử dụng một từ điển mà tính năng mật khẩu đã có.

Answer 3

tôi sẽ đề nghị đánh giá một jQuery sức mạnh mật khẩu Plugin hiện có. (trừ khi bạn chỉ làm việc đó như một bài tập)

Dưới đây là một số liên kết tôi được tìm thấy:

http://www.visual-blast.com/javascript/password-strength-checker/

http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

http://benjaminsterling.com/?p=117

Answer 4

Ngày đầu câu trả lời gs', bạn nên kiểm tra mật khẩu chống từ điển thông thường (sử dụng một hash, có lẽ). Nếu không, mật khẩu yếu như 'Yellow1' sẽ được đánh giá là mạnh bởi logic của bạn.

Answer 5

Bạn có thể thử các plugin jQuery để kiểm tra sức mạnh mật khẩu

Một số trong số đó là

Password Strength Meter

Password Strength Indicator

Answer 6

Nếu bạn đang làm như excersie

tham khảo: Password Strength Indicator

.210

jQuery Mã sử ​​dụng (# biểu thị những gì đã thay đổi từ mã của Benjamin)

$.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')}); 

}); 

Answer 7

Dưới đây là một sức mạnh mật khẩu miễn phí/chính sách JQuery plug-in validator. Nó cũng hỗ trợ xác nhận mật khẩu được nhập bằng nhiều ngôn ngữ (được hỗ trợ trong Unicode). Nó là đa ngôn ngữ.

Password Policy/Strength JQuery plug-in Validator

Answer 8

RnZ Code Labs có dễ sử dụng Password Strength plugin.

Answer 9

bạn có thể dùng thử bản trình diễn này: http://www.gbin1.com/technology/democenter/20120903-jquery-plugin-complexify/, được phát triển bởi plugin jquery phức tạp. tôi nghĩ nó thật tuyệt!

Answer 10

Sức mạnh của mật khẩu phải được kiểm tra trên danh nghĩa của một vài thông số như sự hiện diện của ký tự đặc biệt và số, độ dài của mật khẩu, vv

tôi đã tìm thấy các hướng dẫn dưới đây với bản demo đẹp:

http://tinytute.com/2014/06/03/animated-password-strength-checker-quick-easy/

mã jQuery khối:

$(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+'%'); 

    }); 

}); 

Hope các thiết lập của logic sẽ giải quyết vấn đề

Answer 11

Trong trường hợp bạn không muốn sử dụng jQuery, bạn có thể sử dụng một cái gì đó như thế này:

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: 
 
\t \t \t \t 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: 
 
    \t \t weight = 7; 
 
     extra = 4; 
 
     break; 
 
    case p.length>10 && p.length<=14: 
 
    \t \t weight = 6; 
 
     extra = 3; 
 
     break; 
 
    case p.length>14 && p.length<=18: 
 
    \t \t 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'));

đoạn trên sẽ tính toán sức mạnh mật khẩu cho các mật khẩu 6-18 ký tự trong chiều dài. Giá trị mặc định cho mỗi nhân vật duy nhất là

• 7 điểm nếu mật khẩu 6-10 ký tự
• 6 điểm nếu mật khẩu 10-14 ký tự
• 5 điểm nếu mật khẩu 14-18 ký tự

Nếu ký tự được lặp lại trong mật khẩu thì nó sẽ mất 2 điểm cho mỗi lần lặp lại.

Thêm điểm được đưa ra khi các thông số kỹ thuật sau đây được đáp ứng:

• mật khẩu có ít nhất 6 chữ số (thêm 2,5 hoặc 3 hoặc 4 điểm)
• mật khẩu có ít nhất 1 số (thêm 2,5 hoặc 3 hoặc 4 điểm)
• mật khẩu có ít nhất 1 ký tự đặc biệt (thêm 2,5 hoặc 3 hoặc 4 điểm)
• passw ord có ít nhất 1 chữ hoa và 1 trường hợp thấp hơn nhân vật (thêm 2,5 hoặc 3 hoặc 4 điểm)

Answer 12

Cách tốt nhất là này

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>

Answer 13

Thử mã này để kiểm tra mật khẩu cho hộp văn bản

<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/> 

Kiểm tra các demo Here