jQuery Validation de mot de passe

Le plugin de validation de mot de passe jQuery étend le plugin jQuery Validate et fournit deux composants :
Une fonctionnalité qui évalue les facteurs liés au mot de passe : comme le mélange de lettres majuscules et minuscules, le mélange de caractères (chiffres, caractères spéciaux), la longueur et la similitude avec le nom d'utilisateur (facultatif).
Une méthode de plugin de validation personnalisée qui utilise la fonctionnalité d'évaluation pour afficher la force du mot de passe. Le texte affiché peut être localisé.

Vous pouvez facilement personnaliser l'apparence de l'affichage de la force, localiser l'affichage des messages et l'intégrer dans des formulaires existants.

La version actuelle de ce plugin est 1.0.0.

Utilisation

Pour utiliser le plugin de validation de mot de passe, ajoutez une classe "password" au champ de saisie, et ajoutez le balisage de base pour afficher la force là où il doit être affiché dans le formulaire :

<form id="register">
    <label for="password">Password:</label>
    <input class="password" name="password" id="password" />
    <div class="password-meter">
        <div class="password-meter-message"> </div>
        <div class="password-meter-bg">
            <div class="password-meter-bar"></div>
        </div>
    </div>
</form>

Appliquez le plugin Validate au formulaire :

$(document).ready(function() {
  $("#register").validate();
});

Vous pouvez surcharger $.validator.passwordRating pour implémenter différentes méthodes d'évaluation. Ou surcharger $.validator.passwordRating.messages pour fournir d'autres messages, tels que la localisation.

Démo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
  }
});
</script>
</body>
</html>

Autres extensions