ASP.MVC 客户端验证不起作用

Question

我正在尝试验证登录页面上的用户输入。 我有我的User mode：

• 字符串用户名
• 字符串密码

我决定用部分类扩展我的数据库模型：

[MetadataType(typeof(User))]
public partial class User : IUser
{

}

public interface IUser
{
    [Required(ErrorMessage = "Login is required")]
    string UserName { get; set; }

    [Required(ErrorMessage = "Password is required")]
    string Password { get; set; }
}

还有我的view：

   @using (Html.BeginForm("Login", "Account", FormMethod.Post))
   {
      @Html.ValidationSummary(true)      
      @Html.TextBoxFor(model => model.UserName, new { size = 30, @placeholder = "Login",    
      @class = "credential" })
      @Html.ValidationMessageFor(model => model.UserName)
      @Html.PasswordFor(model => model.Password, new { size = 30, @placeholder = 
   "Password",    @class = "credential" })
      @Html.ValidationMessageFor(model => model.Password)
   }

它不是客户端验证，而是回发并在模型中的 null 值上崩溃。

关注this question我加了

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

到视图顶部，确保脚本已加载：

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

我错过了什么？

Answer 1

似乎与您在接口属性而不是类属性上进行验证有关。

检查 DOM 元素。用户名应如下所示：

<input class="credential" data-val="true" data-val-required="Login is required" id="UserName" name="UserName" placeholder="Login" size="30" type="text" value="">

注意 data-val 和 data-val-required 属性。这些由 js 验证逻辑使用。

当我尝试使用您的接口属性验证时，这些都丢失了。

也许您应该为此使用视图模型而不是模型？这样您就可以根据视图要求对其进行定制。

编辑

实际上，只需在 razor 视图中声明 @model 以引用 IUser 而不是 User。

@model IUser