MVC 新手 C# 4.0 开发 Javascript .NET ASP.NET C#

ASP.NET MVC3 - 使用 jQuery 和 XML 实现密码强度指示器

Bryian Tan

4.82/5 (4投票s)

2012年7月30日

CPOL

4分钟阅读

40949

967

关于如何将使用 jQuery 和 XML 的密码强度指示器插件与 ASP.NET MVC3 Razor 集成的示例代码。

引言
入门
账户模型中的更改
账户控制器中的更改
账户注册视图中的更改
结论
历史
资源
演示
下载

引言

本文的目的是演示如何将使用 jQuery 和 XML 的密码强度指示器插件集成到 ASP.NET MVC 3 Razor 中。在本教程中，我们将把该插件包含到“注册账户”和“更改密码”视图中。

入门

下面是示例应用程序的内容。在 Visual Studio 2010 中

创建一个新项目
获取最新版本的插件，并将 jquery.password-strength.js 复制到 Scripts 文件夹
将 XML 文件夹复制到项目根目录或放置到 Content 文件夹
在 Models 文件夹下创建 PasswordSetting 类
我们将要修改的文件是 *AccountController.cs*、*AccountModels.cs*、*Register.cshtml* 和 *ChangePassword.cshtml*。
请注意，*jquery.password-strength.js* 中 XML 文件的绝对路径硬编码为 localhost。在部署到生产环境之前，请务必进行相应修改。

图 1
solution

账户模型中的更改

在 RegisterModel 类中，删除 Password 属性的 StringLength 特性，因为长度将由插件检查。如果保留该特性，它将同时显示错误消息和密码强度指示条，直到密码达到六个字符。

列表 1

public class RegisterModel
    {
        [Required]
       // [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }
    }

账户控制器中的更改

在此版本中，我们将使用 LINQ 读取 XML 文件。此控制器中的 *GetPasswordRegex()* 方法负责从 XML 文件检索密码信息并将其存储在 PasswordSetting 对象中。然后，它将使用该信息来组合密码强度正则表达式。对于此演示，XML 文件的路径是硬编码的，您可以将 XML 文件的路径放在 web.config 中。

列表 2

internal string GetPasswordRegex()
{
    XDocument xmlDoc = XDocument.Load(Request.MapPath("~/xml/PasswordPolicy.xml"));

    var passwordSetting = (from p in xmlDoc.Descendants("Password")
                            select new PasswordSetting
                            {
                                Duration = int.Parse(p.Element("duration").Value),
                                MinLength = int.Parse(p.Element("minLength").Value),
                                MaxLength = int.Parse(p.Element("maxLength").Value),
                                NumsLength = int.Parse(p.Element("numsLength").Value),
                                SpecialLength = int.Parse(p.Element("specialLength").Value),
                                UpperLength = int.Parse(p.Element("upperLength").Value),
                                SpecialChars = p.Element("specialChars").Value
                            }).First();

    StringBuilder sbPasswordRegx = new StringBuilder(string.Empty);
    //min and max
    sbPasswordRegx.Append(@"(?=^.{" + passwordSetting.MinLength + "," + passwordSetting.MaxLength + "}$)");

    //numbers length
    sbPasswordRegx.Append(@"(?=(?:.*?\d){" + passwordSetting.NumsLength + "})");

    //a-z characters
    sbPasswordRegx.Append(@"(?=.*[a-z])");

    //A-Z length
    sbPasswordRegx.Append(@"(?=(?:.*?[A-Z]){" + passwordSetting.UpperLength + "})");

    //special characters length
    sbPasswordRegx.Append(@"(?=(?:.*?[" + passwordSetting.SpecialChars + "]){" + passwordSetting.SpecialLength + "})");

    //(?!.*\s) - no spaces
    //[0-9a-zA-Z!@#$%*()_+^&] -- valid characters
    sbPasswordRegx.Append(@"(?!.*\s)[0-9a-zA-Z" + passwordSetting.SpecialChars + "]*$");

    return sbPasswordRegx.ToString();
}

将清单 3 中的代码添加到 Register 方法的开头。在禁用 JavaScript 的情况下进行测试时，我发现当 Password 输入为空时会发生错误“System.ArgumentNullException: Value cannot be null. Parameter name: input”。为了避免这种情况，请确保在调用 *Regex.IsMatch* 方法之前 Password 输入不为空。如果密码不符合策略，请在屏幕上显示“Password does not meet policy!”错误消息。

列表 3

if (!string.IsNullOrEmpty(model.Password))
    {
        if (!Regex.IsMatch(model.Password, GetPasswordRegex()))
        {
            ModelState.AddModelError("Password", "Password does not meet policy!");
        }
    }

账户注册视图中的更改

在页面上包含对 *jquery.password-strength.js* 插件的引用，并将清单 6 中的脚本添加到视图的底部。在密码文本框下方添加一个密码策略链接，并将其 ID 设置为“passwordPolicy”。请参考清单 4。

列表 4

@Html.ActionLink("Password policy","", null, new { id = "passwordPolicy" })

最初，按钮提交点击函数下只有清单 5 中的代码。由于某些原因，整个表单的客户端验证在按钮提交点击时不起作用。这可以理解，因为如果用户在没有输入密码文本框的情况下点击提交按钮，插件应该返回 false。但相同的一套代码在 ASP.NET 应用程序中运行正常。解决方法是手动调用 jQuery valid() 函数，在检查密码是否满足要求之前，检查所有表单元素是否有效。

列表 5

$("[id='btnSubmit']").click(function () {
     return myPlugin.metReq(); //return true or false
});

列表 6

<script type="text/javascript">
    $(document).ready(function () {
        var myPlugin = $("input[id='Password']").password_strength();

        $("[id='btnSubmit']").click(function () {
            var $form = $('form');
            if ($form.valid()) {
                return myPlugin.metReq(); //return true or false
            }
        });

        $("[id='passwordPolicy']").click(function (event) {
            var width = 350, height = 300, left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2);
            window.open("https://:1234/xml/PasswordPolicy.xml", 'Password_poplicy',
	    'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top);
            event.preventDefault();
            return false;
        });
    });
</script>