2

我想为我为学校建立的网上商店进行密码检查。这用颜色警报表示：红色表示弱，橙色表示正常，绿色表示良好。最好的方法是什么？

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

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

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

4

2 回答 2

1

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

  1. 每次在密码文本框中发生按键时执行
  2. 评估文本长度
  3. 根据密码长度更改 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 驱动器。只需单击文件->下载以获取 .zip 文件

于 2013-04-10T10:33:14.070 回答
0

您可以使用以下 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/

于 2013-04-10T09:03:46.400 回答