I wanna make a password check for the webshop that im building for school. Thats indicated with color alert: so red for weak, orange, for normal, and green foor good. What could be the best approach to do this?
Here is a little section of where the user need to put in a password:
password
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Klant.password)
@Html.ValidationMessageFor(model => model.Klant.password)
</div>
This is a homework assignment, and we are informed we're not allowed to use javascript.
The best approach would definitely be to do this on the client using javascript. I wrote a jQuery function for you which does the following:
Note: Simply download jQuery(if you don't have it already in the Scripts folder) and add a reference to it in your view and make sure the id of the password text box is correct(I've called mine "Password")
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//"Password" is the id of the password textbox
//yours may be different so make sure to change this if necessary
$("#Password").keyup(function () {
var length = $("#Password").val().length;
var colour = "";
if (length <= 4)
colour = "red";
else if (length <= 7)
colour = "orange";
else
colour = "green";
$("#strength").css("background-color", colour);
});
});
</script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
<div id="strength" style="width:100px;height:20px;">
</div>
</div>
<p>
<input type="submit" value="Create" />
</p>
}
If you don't come right I've created a sample project and uploaded it to Google drive .Just click File->Download to get the .zip file
You can use following javascript code for checking strength:
function pwdStrength(password)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById("pwdDescription").innerHTML = desc[score];
document.getElementById("pwdStrength").className = "strength" + score;
}
Apart from this you can refer following links:
http://passwordadvisor.com/CodeAspNet.aspx
http://www.c-sharpcorner.com/uploadfile/f9935e/password-policystrength-Asp-Net-mvc-validator/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.