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