向MVC添加JQuery页面

Question

我是使用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，然后就使用该ID在我的jQuery代码，我就可以做同样的在这里？

Answer 1

默认情况下，input html元素都有其name和id设为您的模型属性的名称，因此，如果你的财产是“密码”，那么你的jQuery选择应符合它：

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

Answer 2

<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" })