验证在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，但它可能是更容易使用什么是内置的。