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