ASP.NET MVC密码检查：弱，正常，强

Question

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.

Answer 1

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:

1. Executes every time a key press occurs in your password text box
2. Evaluates the text length
3. Changes the background colour of a div based on password length

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

Answer 2

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/