驗證在bootstrap和asp.net mvc5

Question

我有一個引導模板，並希望在我的asp.net mvc 5項目中使用它。在_layout的網頁我有這些代碼：

 <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> 
    <!-- BEGIN CORE PLUGINS --> 
    <!--[if lt IE 9]> 
    <script src="../../Template/metronic/assets/global/plugins/respond.min.js"></script> 
    <script src="../../Template/metronic/assets/global/plugins/excanvas.min.js"></script> 
    <![endif]--> 
    <script src="../../Template/metronic/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script> 
    <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> 
    <script src="../../Template/metronic/assets/global/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> 
    <script src="../../Template/metronic/assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script> 
    <!-- END CORE PLUGINS --> 
@RenderSection("FEATURED", true) 
    <script> 
     jQuery(document).ready(function() { 
      Metronic.init(); // init metronic core componets 
      Layout.init(); // init layout 
      QuickSidebar.init() // init quick sidebar 
      Index.init(); 
      Index.initDashboardDaterange(); 
      Index.initJQVMAP(); // init index page's custom scripts 
      Index.initCalendar(); // init index page's custom scripts 
      Index.initCharts(); // init index page's custom scripts 
      Index.initChat(); 
      Index.initMiniCharts(); 
      Index.initIntro(); 
      Tasks.initDashboardWidget(); 
     }); 
    </script> 
    <!-- END JAVASCRIPTS --> 

和部分指定功能我在子頁面，這些代碼

<!-- END PAGE CONTENT--> 
@section featured{ 
    <!-- BEGIN PAGE LEVEL PLUGINS --> 
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script> 
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script> 
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script> 
    <!-- END PAGE LEVEL PLUGINS --> 
    <!-- BEGIN PAGE LEVEL PLUGINS --> 
    <script type="text/javascript" src="../../../../Template/metronic/assets/global/plugins/select2/select2.min.js"></script> 
    <!-- END PAGE LEVEL PLUGINS --> 
    <!-- BEGIN PAGE LEVEL SCRIPTS --> 
    <script src="../../../../Template/metronic/assets/global/scripts/metronic.js" type="text/javascript"></script> 
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/layout.js" type="text/javascript"></script> 
    <script src="../../../../Template/metronic/assets/admin/layout/scripts/quick-sidebar.js" type="text/javascript"></script> 
    <script src="../../../../Template/metronic/assets/admin/pages/scripts/form-wizard.js"></script> 
    <!-- END PAGE LEVEL SCRIPTS --> 
    <script> 
     jQuery(document).ready(function() { 
      // initiate layout and plugins 
      FormWizard.init(); 
     }); 
    </script> 
    <!-- END JAVASCRIPTS -->} 

在子頁面創建嚮導的形式來獲取用戶信息，並有一個形成這樣的：

      <form action="#" class="form-horizontal" id="submit_form" method="POST"> 
               <div class="form-group"> 
                <label class="control-label col-md-3">Username <span class="required"> 
                * </span> 
                </label> 
                <div class="col-md-4"> 
                 <input type="text" class="form-control" name="username"/> 
                 <span class="help-block"> 
                 Provide your username </span> 
                </div> 
               </div> 
</form> 

客戶端驗證效果最好，但是當我改變輸入到剃刀輸入驗證沒有工作

           <div class="form-group"> 
                <label class="control-label col-md-3"> 
                 Username <span class="required"> 
                  * 
                 </span> 
                </label> 
                <div class="col-md-8"> 
                 @Html.TextBoxFor(model => model.karkonan.Name, new { @class = "form-control" }) 
                 @Html.ValidationMessageFor(model => model.karkonan.Name) 
<span class="help-block"> 
                  Provide your username 
                 </span> 
                </div> 
               </div> 

在 形式，wizard.js

，我想添加代碼來定義規則，以驗證karkonan.Name，但它的名字是Javascript無效。

username: { 
         minlength: 5, 
         required: true 
        } 
karkonan.Name: { 
         minlength: 5, 
         required: true 
        } 

，當我取代這種形式的標籤：

當我傳給其他嚮導步驟

@using (Html.BeginForm("create", "karmand", FormMethod.Post, new { @class="form-horizontal",@id="submit_form"})) 
       { 
        @Html.AntiForgeryToken() 

沒有驗證工作。

Answer 1

對於MVC和剃鬚刀，當您使用類似@ Html.For的東西時，您的驗證需要以屬性的形式針對服務器端C＃模型。

因此，'karkonan'上的'Name'（C＃類名應該以大寫字母開頭）需要有一個'[Required]'屬性。 MVC會將客戶端驗證屬性放入生成的html中（這反過來會在客戶端上使用jQuery不顯眼的驗證方式）。在服務器上的控制器中，您還需要檢查有效的模型狀態。

你可以連線了一些自己的客戶端驗證，如果檢查剃刀產生輸入HTML，該元素將得到有意義的ID，但它可能是更容易使用什麼是內置的。