天天看点

asp.net 客户端验证 前端页面无效

问题:模型属性上面增加了注释,页面上却无法验证。

原因:

1.  没有加jquery验证相关js文件

2.  页面上写法不对

解决:

1. 在页面中加载jquery.js、jquery.validate.js和jquery.validate.unobtrusive.js几个文件

<script src="~/Scripts/jquery.js"></script>      
<script src="~/Scripts/jquery.validate.js"></script>      
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>      
           

2. 正确的写法如下:

<div class="form-group">
     @Html.LabelFor(m => m.MailAddress, new { @class = "col-md-2 control-label" })
     <div class="col-sm-10">
           @Html.TextBoxFor(m => m.MailAddress, new { @class = "form-control", placeholder = "请输入邮箱" })
           @Html.ValidationMessageFor(m => m.MailAddress, "", new { @class = "text-danger" })
     </div>
</div>
           

注意:文本框不能用<input>标签写,不然验证不了,因为调用HtmlHelper<TModel>的扩展方法EditorForModel会生成与下面类似的HTML。

可以看到,对应着Model对象两个属性的<input>元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性,前者表示是否需要对用户输入的值进行验证,后者则代表相应的验证规则。具体来说,去除“data-val-”前缀后的属性名称对应着采用jQuery验证时对应的验证规则名称。(例,和上面的)

5: <div class="editor-field">
   6:   <input class="text-box single-line" 
   7:          data-val            ="true" 
   8:          data-val-length     ="作为姓名字符串长度不能超过8!" 
   9:          data-val-length-max ="8" 
  10:          data-val-required   ="请输入姓名!" 
  11:          id="Name" name="Name" type="text" value="" />
  12:   <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
  13: </div>
           

参考链接:

1. https://blog.csdn.net/qq121023/article/details/54912175

2. http://www.cnblogs.com/artech/archive/2012/06/18/client-validation-02.html