在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的。服务端验证最终实现在相应的ModelValidator中,而最终的验证规则定义在相应的ValidationAttribute中;而客户端验证规则通过HtmlHelper<TModel>相应的扩展方法(比如TextBoxFor、EditorFor和EdidtorForModel等)出现在生成的被验证HTML元素中。毫无疑问,服务端验证和客户端验证必须采用相同的验证规则,那么通过应用ValidationAttribute特性定义的验证规则也同样体现在基于客户端验证规则的HTML上。
一、ValidationAttribute与HTML
ASP.NET MVC默然采用基于ValidationAttribute特性的声明式Model验证,服务端验证最终实现在两个重写的IsValid方法中。对于客户端验证,ASP.NET MVC对jQuery的验证插件进行了扩展,实现了另一种不同的内联方式是我们 可以将验证规则定义在被验证输入元素的属性中。为了让客户端和服务端采用相同的验证规则,应用在Model类型某个属性上的ValidationAttribute特性最终会体现在目标属性对应的HTML元素上。
1: public class Contact 2: { 3: [DisplayName("姓名")] 4: [Required(ErrorMessage ="请输入{0}!")] 5: [StringLength(8, ErrorMessage="作为{0}字符串长度不能超过{1}!")] 6: public string Name { get; set; } 7: 8: [DisplayName("电子邮箱地址")] 9: [RegularExpression(@"^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$",ErrorMessage="请输入正确的电子邮箱地址!")] 10: public string EmailAddress { get; set; } 11: }
假设我们具有如上一个数据类型Contact,RequiredAttribute和StringLengthAttribute特性应用到表示姓名的Name属性上用于确保用于必须输入一个不超过128个字符的字符串,而表示Email地址的EmailAddress属性应用了一个RegularExpressionAttribute用于确保用于输入一个合法的Email地址。在一个以此Contact为Model类型的View中,如果我们调用HtmlHelper<TModel>的扩展方法EditorForModel,最终会生成如下一段HTML。
1: <div class="editor-label"> 2: <label for="Name">姓名</label> 3: </div> 4: 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> 14: 15: <div class="editor-label"> 16: <label for="EmailAddress">电子邮箱地址</label> 17: </div> 18: 19: <div class="editor-field"> 20: <input class="text-box single-line" 21: data-val ="true" 22: data-val-regex ="请输入正确的电子邮箱地址!" 23: data-val-regex-pattern ="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" 24: id="EmailAddress" name ="EmailAddress" type="text" value="" /> 25: <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span> 26: </div>
通过上面的这段HTML我们可以看到,对应着Model对象两个属性的<input>元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性,前者表示是否需要对用户输入的值进行验证,后者则代表相应的验证规则。具体来说,去除“data-val-”前缀后的属性名称对应着采用jQuery验证时对应的验证规则名称。
一般来说,一个ValidationAttribute对应着一种验证类型和一系列可选的验证参数。比如RequiredAttribute、StringLengthAttribute和RegularExpressionAttribute对应的验证类型分别是“required”、“length”和“regex”,而StringLengthAttribute和RegularExpressionAttribute各自具有一个验证参数length-max(表示允许的字符串最大长度)和regex-pattern(正则表达式)。验证错误消息一般作为验证类型属性的值,而验证参数对应的属性值自然就是相应的属性值。
对于上面生成的HTML还有一点值得一提的是:对应着被验证属性的<input>元素会紧跟一个<span>元素用于显示验证失败后的错误消息。该<span>元素的CSS类型为“field-validation-valid”,我们可以通过它来定制错误消息的显示样式。
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索客户端
, 验证
, 属性
, 规则
, ValidationAttribute
, 一个
, 客户端验证
, mvc参数验证
验证规则
,以便于您获取更多的相关知识。