Question

我想为我正在为学校建设的网上商店进行密码检查。多数表示颜色警告：对于弱，橙色，正常和绿色表现为红色。什么是最好的方法来做到这一点？

以下是用户需要输入密码的一小部分：

        password
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Klant.password)
        @Html.ValidationMessageFor(model => model.Klant.password)
    </div>

这是一项家庭作业，我们被告知我们不允许使用javascript。

Answer 1

最好的方法肯定是使用javascript在客户端上执行此操作。我为你写了一个jQuery函数，它执行以下操作：

每次在密码文本框中发生按键操作时执行
评估文字长度
根据密码长度更改div的背景颜色

注意：只需下载jQuery（如果你还没有在Scripts文件夹中），并在你的视图中添加对它的引用，并确保密码文本框的id是正确的（我称之为“密码”）

<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>
}

如果你没有做对，我已经创建了一个示例项目并将其上传到Google drive。只需点击文件 - ＆gt;下载即可获得.zip文件

Answer 2

您可以使用以下javascript代码检查强度：

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

除此之外，您可以参考以下链接：

http://passwordadvisor.com/CodeAspNet.aspx

http://www.c-sharpcorner.com/uploadfile/f9935e/password-policystrength-Asp-Net-mvc-validator/

Asp.net mvc密码检查：弱，正常，强

2 个答案: