addClass et removeClass

Version imprimable

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:

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:

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:

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

07/10/2016, 07h57
Invité

Bonjour,

De rien...C'est pourquoi ? :weird:
07/10/2016, 08h29
Fredy007

La barre de progression, marche seulement que dans le cas de 'weak', pour le reste, l'événement ne marche pas
07/10/2016, 08h40
EddiGordo

Bonjour,

Si tu as une div :

Code:

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

pour laquelle tu fais

Code:

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

tu te retrouves avec

Code:

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

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

Code:

$('.container').removeClass().addClass('container machin')
07/10/2016, 10h02
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:

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

Code:

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

Une autre approche encore :

Code:

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

Code:

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:

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

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

Code:

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

08/10/2016, 10h35
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
10/10/2016, 03h48
Fredy007
Citation:

Envoyé par jreaux62

Indice : caractères interdits...

Quelque chose comme:
Code:

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

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

Non, je vais le lire, merci