Smooth password strength

Question

Hey. The script verifies the reliability of the password, the question is: when you add each new character, the block re-appears smoothly (the security level goes out in the block). How to make each security level show only once smoothly?

<div id="bg"> <p id="result"></p> <p id="bg_res"></p> </div>

===

  function check(pass) { var protect = 0; $("#bg").hide().fadeIn(500); if(pass.length < 8) { $("#bg_res").removeClass(); $("#bg_res").addClass('red'); return "Слабый"; } //a,s,d,f var small = "([az]+)"; if(pass.match(small)) { protect++; } //A,B,C,D var big = "([AZ]+)"; if(pass.match(big)) { protect++; } //1,2,3,4,5 ... 0 var numb = "([0-9]+)"; if(pass.match(numb)) { protect++; } //!@#$ if(pass.match(/\W/)) { protect++; } if(protect == 2) { $("#bg_res").removeClass(); $("#bg_res").addClass('yellow'); return "Средний"; } if(protect == 3) { $("#bg_res").removeClass(); $("#bg_res").addClass('green'); return "Хороший"; } if(protect == 4) { $("#bg_res").removeClass(); $("#bg_res").addClass('green_v'); return "Высокий"; } }

Deonis deonis 32.3k one 24 45 · Accepted Answer · 2014-10-26T06:58:01

If not really going into the calculations, then you can do something like this :

 var checkPass = { regs : [/[az]+/,/[AZ]+/,/[0-9]+/,/[\W]/], rating: function(str){ var cnt = str.length > 8 ? 0 : -1; for(var i = 0; i < this.regs.length; i++){ if(this.regs[i].test(str)) cnt++; } return this.styles[cnt]; }, styles:[ {width: '20%', backgroundColor: '#F00'}, {width: '40%', backgroundColor: '#FE4D01'}, {width: '60%', backgroundColor: '#FF8000'}, {width: '80%', backgroundColor: '#C4FC03'}, {width: '100%', backgroundColor: '#00A400'} ] }; $('#pass').on('input', function(){ $('#progress div').finish().animate(checkPass.rating($(this).val()), 500); });

@Deonis, I liked your version very much, Thank you) But now there are no words (weak, medium ....), or it can show a better percentage in color.
@Alextrue, you can [with words] [1] [1]: jsfiddle.net/Deonis/o0t0vren/1
@Alextrue, are you talking about [jQuery library] [1] or about Pushkin library?

Smooth password strength

1 answer 1

More articles: