将JQuery添加到MVC页面

本文关键字：MVC 页面 添加 JQuery | 更新日期: 2023-09-27 18:24:21

我是使用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>

这是我注册页面的代码。

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

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

将JQuery添加到MVC页面

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

并且在视图中：

@Html.PasswordFor(m => m.Password, new { @class = "form-control" ,@id="pass" })

默认情况下，input html元素的name和id将被设置为模型属性名称，因此如果您的属性是"Password"，那么您的jquery选择器应该与之匹配：

<script>
    $(function() {
        $('#Password').keyup(function (e) {
            ...
        });
    });
</script>
相关文章：