Discussion :

[Fredy007]

Bonjour,

J'ai un code de vérification avec switch, tout dépend du cas, je mets addClass et removeClass, l'événement s'applique seulement pour le vas 'weak' et le reste non en ce qui concerne la barre avec les couleurs:

CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.container, .weak, .medium, .good, .better, .best {
  height:10px;
  transition: all 0.4s ease;
}
 
.weak {
  width:40px;
background:#EA4A34;
  }
 
.medium {
   width:60px;
   background: #F69C55;
}
 
.good {
   width:80px;
   background: #F69C55;
}
 
.better {
    width:100px;
    background: #3C8FB0;
}
 
.best {
   width:120px;
    background: #5FBA7D;
}

HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<input type="text" class="pass">
<span class="wrap"></span>
<br>
<br>
<div class="container"></div>

Et dans mon code jQuery:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
function checkPassStrength(){
var value = $('.pass').val();
    //console.log('v: '+value);
    var passLen = value.length;
    //console.log('l: '+passLen);
		var strength = 0;
		var upperCase = new RegExp('[A-Z]', 'g'); // at least 2 capital letters (even not in sequence)
		var lowerCase = new RegExp('[a-z].*[a-z]', 'g'); // at least 2 small letters (even not in sequence)
		var digits = new RegExp('\\d'); // at least one digit
		var specChars = new RegExp('[;:|,.<>?!@#$§£¥©®%^&()_=°]', 'g'); // at least one special character
 
 
 
 
if (passLen < 6) return 'Too short';
 
if (passLen > 7) strength += 1
 
if (value.match(lowerCase)) strength += 1
 
res = value.match(upperCase);// strength += 1
if(res != null && res.length >= 2) strength += 1
 
if (value.match(digits)) strength += 1
 
if (value.match(specChars)) strength += 1
 
 
console.log('strength '+strength);
 
switch(strength){
  	case 1:
	strStrength = 'Weak';
      console.log('weak');
      $('.container').removeClass().addClass('weak');
    break;
 
    case 2:
strStrength = 'Medium';
      console.log('medium');
      $('.container').removeClass().addClass('medium');
    break;
 
    case 3:
	strStrength = 'Good';
      console.log('good');
      $('.container').removeClass().addClass('good');
    break;
 
    case 4:
			strStrength = 'Better';
      console.log('better');
$('.container').removeClass().addClass('better');
    break;
 
    case 5:
			strStrength = 'Best';
      console.log('best');
$('.container').removeClass().addClass('best');
    break;
 
 
    default:
    strStrength = 'To Default';
    break;
    }
 
 $('.wrap').html(strStrength).show();
 
}
 
 
$('.pass').on('keyup',function(){  
	$('.wrap').html(checkPassStrength()).show();
 
  });

Merci a vous

[Invité]

Bonjour,

De rien...C'est pourquoi ?

[Fredy007]

La barre de progression, marche seulement que dans le cas de 'weak', pour le reste, l'événement ne marche pas

[EddiGordo]

Bonjour,

Si tu as une div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="container"></div>

pour laquelle tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.container').removeClass().addClass('machin')

tu te retrouves avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="machin"></div>

Donc le sélecteur suivant sur .container ne trouve rien...
Essaie plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.container').removeClass().addClass('container machin')

[Invité]

@EddiGordo Bien vu.

Une autre approche, si on suppose que le "container" peut avoir d'autres classes (en dehors de celles concernées) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="container blabla taratata"></div>

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

  $('.container').removeClass('weak medium good better best').addClass('weak');

[Invité]

Une autre approche encore :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="container"><span></span></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 .container {
   width: 100px;
   border: 1px solid #ccc;
 }
 
 .container span {
   display: block;
   height: 10px;
   transition: all 0.4s ease;
 }
 
 .weak {
   width: 20%;
   background: #EA4A34;
 }
 
 .medium {
   width: 40%;
   background: #F69C55;
 }
 
 .good {
   width: 60%;
   background: #F69C55;
 }
 
 .better {
   width: 80%;
   background: #3C8FB0;
 }
 
 .best {
   width: 100%;
   background: #5FBA7D;
 }

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
    var upperCase = new RegExp('[A-Z]', 'g'); // at least 2 capital letters (even not in sequence)
    var lowerCase = new RegExp('[a-z].*[a-z]', 'g'); // at least 2 small letters (even not in sequence)
    var digits = new RegExp('\\d'); // at least one digit
    var specChars = new RegExp('[;:|,.<>?!@#$§£¥©®%^&()_=°]', 'g'); // at least one special character
 
    function checkPassStrength() {
      var value = $('.pass').val();
      var passLen = value.length;
      var strength = 0;
 
      if (passLen > 7)
      {
        strength += 1
 
        if (value.match(lowerCase)) strength += 1
 
        res = value.match(upperCase); // strength += 1
        if (res != null && res.length >= 2) strength += 1
 
        if (value.match(digits)) strength += 1
 
        if (value.match(specChars)) strength += 1
 
      } else {
        strength = 0;
      }
 
      // (on doit pouvoir modifier la langue, sans modifier le nom des classes)
      strStrength_lang_array = ['Trop court', 'Faible', 'Moyen', 'Bon', 'Mieux', 'Meilleur']; // texte affiché
      strStrength_span_array = ['', 'weak', 'medium', 'good', 'better', 'best']; // classes
      strStrength = strStrength_lang_array[strength];
      $('.container span').removeClass().addClass(strStrength_span_array[strength]);
      // (le code ci-dessus remplace le switch)
 
      $('.wrap').html(strStrength).show();
    }
 
    $('.pass').on('keyup', function() {
      checkPassStrength();
    });

[Fredy007]

Merci à vous tous, je termine mon code comme suite, avec la même structure HTML et CSS de jreaux62:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
 
var upperCase = new RegExp('[A-Z]', 'g'); // at least 2 capital letters (even not in sequence)
		//var lowerCase = new RegExp('[a-z].*[a-z]', 'g'); // at least 2 small letters (even not in sequence)
var lowerCase = new RegExp('[a-z]', 'g'); // at least 2 small letters (even not in sequence)
var digits = new RegExp('\\d'); // at least one digit
    //[]{};:|,.<>?!@#$§£¥©®%^&()_=+-°
var specChars = new RegExp('[;:|,.<>?!@#$§£¥©®%^&()_=°]', 'g'); // at least one special character
 
 
function checkPassStrength(){
		var value = $('.pass').val();
    var passLen = value.length;
    var language	= $('.lang:checked').val();
    console.log(language);
    var strength	= 0;
 
		if (passLen > 5) {
 
    //strength +=1;
 
    resl = value.match(lowerCase);// strength += 1
//console.log(res); // will return an array of uppercase (["M", "P"]) or null (if no uppercase)
//console.log(res.length); // will return the number of uppercases, so we need at least 2 uppercases
	if(resl != null && resl.length >= 2) strength += 1
 
  resu = value.match(upperCase);// strength += 1
//console.log(res); // will return an array of uppercase (["M", "P"]) or null (if no uppercase)
//console.log(res.length); // will return the number of uppercases, so we need at least 2 uppercases
	if(resu != null && resu.length >= 2) strength += 1
 
  if (value.match(digits)) strength += 1
 
  if (value.match(specChars)) strength += 1
 
	} else {
    	strength = 0
} // end if (passLen > 7)
 
console.log('strength '+strength);
 
var strSentence = new Array;
 
strSentence['fr'] = {
0: 'Trop court', 
1: 'Faible',
2: 'Moyen',
3: 'Bon',
4: 'Meilleur',
},
strSentence['en'] = {
0: 'Very short', 
1: 'Weak',
2: 'Medium',
3: 'Good',
4: 'Best',
};
 
//console.log(strSentence['fr']);
 
var strClass	= ['short', 'weak', 'medium', 'good', 'best'];
 
strStrength = strSentence[language][strength];
setClass	= strClass[strength];
 
$('.container span').removeClass().addClass('container '+setClass);
 
 $('.wrap').html(strStrength).show();
 
 
} // end function
 
 
	$('.pass').on('keyup click',function(){
 
	//var password = $(this).val();
 
	$('.wrap').html(checkPassStrength()).show();
 
 
  });

[Invité]

Bonjour,

Tu n'aurais pas oublié un"détail" ?

Indice : caractères interdits...



Au fait, as-tu lu ce tuto ? : Implémenter un indicateur de complexité de mot de passe

[Fredy007]

Indice : caractères interdits...

Quelque chose comme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
var pattern = new RegExp(/^[a-zA-Z0-9;:|,.<>?!@#$§£¥©®%^&()_=°]$/, "g");
 
value.match(pattern)

Au fait, as-tu lu ce tuto ? : Implémenter un indicateur de complexité de mot de passe

Non, je vais le lire, merci