C# 将JQuery添加到MVC页面

我不熟悉使用MVC和BootStrap创建网站，对于如何将我编写的一些JQuery添加到密码文本框中，我有点不知所措

我的JQuery的目的是向用户提供关于他们的密码有多安全的基本反馈。我只需要帮助将JQuery函数添加到密码文本框中，这样当用户开始输入密码时，我的JQuery代码就会开始在密码旁边向用户提供反馈

这是我的JQuery代码

@*Password Strength*@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
    $('#pass').keyup(function (e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        //Not enough characters
        if (false == enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
            $('#passstrength').css('color', 'red')

        //Strong Password
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
            $('#passstrength').css('color', 'lightgreen')
        //Medium Password
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
            $('#passstrength').css('color', 'yellow');
        //Weak Password
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
            $('#passstrength').css('color', 'red')
        }
        return true;
    });
</script>

@*密码强度*@
$（'#pass'）.keyup（函数（e）{
var strongRegex=newregexp（“^（？=.{8，}）（？=.[A-Z]）（？=.[A-Z]）（？=.[0-9]）（？=..*\\W）。*$，“g”）；
var mediumRegex=newregexp（“^（？=.{7，}）（（（？=.[A-Z]）（？=.[A-Z]））|（（？=.[A-Z]）（？=.[0-9]））|（（？=.[A-Z]）（？=.[0-9]））.$，“g”）；
var-enoughRegex=newregexp（（？=。{6，}）。*，“g”）；
//没有足够的字符
if（false==enoughRegex.test（$（this.val（）））{
$（'#passstrength'）.html（'More Characters'）；
$（'#passstrength'）.css（'color'，'red'））
//强密码
}else if（strongRegex.test（$（this.val（）））{
$（'#passstrength'）。类名称='确定'；
$（'#passstrength'）.html（'Strong！'）；
$（'#passstrength'）.css（'color'，'lightgreen'））
//中等密码
}else if（mediumRegex.test（$（this.val（）））{
$（'#passstrength'）。类名称='alert'；
$（'#passstrength'）.html（'Medium！'）；
$（'#passstrength'）.css（'color'，'yellow'）；
//弱密码
}否则{
$（'#passstrength'）。类名称='错误'；
$（'#passstrength'）.html（'Weak！'）；
$（'#passstrength'）.css（'color'，'red'））
}
返回true；
});

这是我的注册页面的代码

@model ultimateorganiser.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" }) 
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@model ultimateOrganizer.Models.RegisterViewModel
@{
ViewBag.Title=“寄存器”；
}
@ViewBag.Title。
@使用（Html.BeginForm（“Register”、“Account”、FormMethod.Post、new{@class=“form horizontal”、role=“form”}））
{
@Html.AntiForgeryToken（）
创建一个新帐户。

@Html.ValidationSummary（“，new{@class=“text danger”}）
@LabelFor（m=>m.Email，新的{@class=“col-md-2控制标签”}）
@TextBoxFor（m=>m.Email，新的{@class=“form control”}）
@LabelFor（m=>m.Password，新的{@class=“col-md-2控制标签”}）
@Html.PasswordFor（m=>m.Password，新的{@class=“form control”}）
@LabelFor（m=>m.ConfirmPassword，新的{@class=“col-md-2控制标签”}）
@Html.PasswordFor（m=>m.ConfirmPassword，new{@class=“form control”}）
}

---

我知道在asp.net中，我可以给密码文本框一个id，然后在我的JQuery代码中使用该id，我可以在这里做同样的事情吗？

默认情况下，您的

输入

html元素将其

名称
和
id
设置为您的模型属性名称，因此如果您的属性是“password”，那么jquery选择器应该与之匹配：

<script>
$(document.ready(function(){

     $('#pass').keyup(function (e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        //Not enough characters
        if (false == enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
            $('#passstrength').css('color', 'red')

        //Strong Password
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
            $('#passstrength').css('color', 'lightgreen')
        //Medium Password
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
            $('#passstrength').css('color', 'yellow');
        //Weak Password
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
            $('#passstrength').css('color', 'red')
        }
        return true;
    });
});

</script>

<script>
    $(function() {
        $('#Password').keyup(function (e) {
            ...
        });
    });
</script>


$（函数（）{
$（“#密码”）.keyup（函数（e）{
...
});
});
将jquery代码放在doument.ready块中，像通常在简单html页面上那样添加脚本。就这么简单=）。此外，我建议将我的代码环绕在$（document）.ready（）周围。密码文本框的id将是password not pass。更改
$（“#pass”）
比通过
@id=“pass”
更改更好，否则在发布表单时可能会遇到问题。（post使用的是'name'而不是'id'，但最好与模型保持一致）
<script>
    $(function() {
        $('#Password').keyup(function (e) {
            ...
        });
    });
</script>