2

学校向けに構築している Web ショップのパスワード チェックを行いたいです。それはカラー アラートで示されます。弱い場合は赤、通常の場合はオレンジ、良好の場合は緑です。これを行うための最良のアプローチは何ですか？

ユーザーがパスワードを入力する必要がある場所の小さなセクションを次に示します。

        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 が正しいことを確認します (私は "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>
}

うまくいかない場合は、サンプル プロジェクトを作成してGoogle ドライブにアップロードしました。[ファイル] -> [ダウンロード] をクリックして、.zip ファイルを取得します。

于 2013-04-10T10:33:14.070 に答える