Vérification password côté client
Bonjour,
J'espère poster au bon endroit...
Étant un récent développeur MVC pour une appli, je rencontre des petites difficultés pour effectuer la vérification d'un champ password pour qu'il soit :
- au moins de 8 caractères,
- avec au moins 1 chiffre ET 1 lettre
- avec au moins 1 majuscule ET 1 minuscule
J'ai réussi à procéder à cette vérification mais côté serveur. J'aimerais pouvoir le faire côté client pour éviter des retours côté serveur et je pense que cela est plus sécurisé.
Je rencontre des difficultés dans la partie layout, sur le modèle de vue créé.
J'ai trouvé des choses intéressantes sur le net, mais assez complexe ou lourde à mettre en place.
J'ai un pop up apparaissant à la 1ère connexion, pour effectuer le changement de password.
J'ai donc 3 champs :
- Old password,
- New password,
- Confirmation new password
J'ai un JS qui se charge de vérifier la regex pour le nouveau password :
Code:
1
2
3
4
5
6
7
8
9
|
$("#change_password-wrap").submit(function () {
if ($("li:nth-child(2)").val() == /^.*(?=.{8,})(?=.*[a-z])(?=.*[\d])(?=.*[[A-Z]|[@!#$%]).*$/) {
$("span").text("Validated...").show();
return true;
}
$("NewPassword").text("Mauvais choix de password").show();
return false;
}); |
Cela fonctionne mais j'ai des problèmes pour faire afficher "Mauvais choix de password" à côté du champs "New Password".
Dans ma view MVC :
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
|
@model AppliWeb.UIModels.ChangePasswordModel
@{
ViewBag.Title = Html.Resource("LOGIN_TITLE");
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="change_password-wrap">
@using (Html.BeginForm("ChangePassword", "Account", FormMethod.Post))
{
<div class="form-row">
<h3>@Html.Resource("CHANGE_PWD_INFO")</h3>
</div>
<div class="form-row">
<label>
@Html.Resource("CHANGE_PWD_TEMP_PASSWORD_LABEL")
</label>
@Html.PasswordFor(p => p.OldPassword)
@Html.ValidationMessageFor(m => m.OldPassword)
</div>
<div class="form-row">
<label>
@Html.Resource("CHANGE_PWD_NEW_PASSWORD_LABEL")
</label>
@Html.PasswordFor(p => p.NewPassword)
@Html.ValidationMessageFor(m => m.NewPassword, null, new { id = "NewPassword" })
</div>
<div class="form-row">
<label>
@Html.Resource("CHANGE_PWD_NEW_PASSWORD_CONFIRM_LABEL")
</label>
@Html.PasswordFor(p => p.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<div class="form-row">
<button type="submit" class="btn saveandcontinue right">@Html.Resource("BTN_SAVE_AND_CONTINUE")</button>
</div>
}
</div> |
Ma fonction JS fonctionne, seulement le message "Mauvais choix de password" s'affiche à côté des 3 champs (oldPassword, newPassword, confirmPassword).
J'ai essayé tout d'abord de l'afficher via le SPAN en ajoutant l'attribut span:nth-child(2) mais cela s'affiche en dehors de mon formulaire, dans un autre SPAN utilisé dans la page... Chose que je ne comprends pas...
J'ai essayé via le li:nth-child(2) mais le message s'affiche sur les 3 champs du formulaires malgré le fait de préciser de le mettre sur la 2ème ligne ou de donner un ID à mon champs NewPassord...
J'ai vu également une façon très simple de le faire via HTML5 mais je ne peux l'implémenter dans ma vue MVC car il m'indique des erreurs de syntaxes(notamment sur la regex) et je ne vois pas comment l'adapter à ma vue :
Code:
1
2
|
<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{8,32}" name="NewPassword" onchange=" this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 8 characters, including UPPER/lowercase and numbers' : ''); if(this.checkValidity()) form.ConfirmPassword.pattern = this.value; "></p> <p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{8,32}" name="ConfirmPassword" onchange=" this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : ''); "></p> |
Est-ce que j'ai zappé qqch pour qu'il ne m'affiche pas correctement ?
Avez-vous d'autres méthodes d'implémentations ?
Merci d'avance.
