ASP.NET MVC客户端及服务端验证

原创 Laughing  2017-12-08 09:21  阅读 118 次 评论 2 条

在mvc中使用表单进行数据提交时,数据验证分为服务器端验证和客户端验证;

我们可以通过使用HtmlHelper中的方法及在页面中引用js库对Model的属性的数据注解(System.ComponentModel.DataAnnotations命名空间下的一组类)进行解析,实现前端、后端的数据验证;

其实客户端验证也是调用的jquery.validate.js,我个人觉得,通过数据注解,服务端的验证确实能够方便不少,但是客户端的验证,感觉还不如直接用jquery.validate来的方便。

数据注解以及微软内置的验证这里就不多介绍了,这里我们主要介绍一下如何实现服务端和客户端自定义验证

前期准备代码,实体类、控制器、视图

实体类
  1. using me.lisen.MVC.Public;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.ComponentModel.DataAnnotations;  
  5. using System.Linq;  
  6. using System.Web;  
  7.   
  8. namespace me.lisen.MVC.Models  
  9. {  
  10.     public class Product  
  11.     {  
  12.         [Key]  
  13.         public string ID { getset; }  
  14.   
  15.         [Display(Name="产品名称")]  
  16.         [Required(ErrorMessage ="请输入产品名称")]  
  17.         [StringLength(2,ErrorMessage ="最多输入两个字符")]  
  18.         public string Name { getset; }  
  19.   
  20.         [Display(Name ="价格")]  
  21.         [Required(ErrorMessage ="请输入价格")]  
  22.         [PriceValid(MinPrice =20.00,ErrorMessage ="价格不能低于20元")]  
  23.         public Decimal Price { getset; }  
  24.     }  
  25. }  
控制器
  1. using me.lisen.MVC.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace me.lisen.MVC.Controllers  
  9. {  
  10.     public class ProductController : Controller  
  11.     {  
  12.         // GET: Product  
  13.         public ActionResult Create()  
  14.         {  
  15.             return View();  
  16.         }  
  17.   
  18.         [HttpPost]  
  19.         public ActionResult Create(Product product)  
  20.         {  
  21.             if (ModelState.IsValid)  
  22.             {  
  23.                 return RedirectToAction("Create");  
  24.             }  
  25.             return View();  
  26.         }  
  27.     }  
  28. }  
视图
  1. @model me.lisen.MVC.Models.Product  
  2.   
  3. @{  
  4.     ViewBag.Title = "Create";  
  5. }  
  6.   
  7. <h2>Create</h2>  
  8.   
  9. @using (Html.BeginForm())   
  10. {  
  11.     @Html.AntiForgeryToken()  
  12.       
  13.     <div class="form-horizontal">  
  14.         <h4>Product</h4>  
  15.         <hr />  
  16.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  17.         <div class="form-group">  
  18.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  19.             <div class="col-md-10">  
  20.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  21.                 @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })  
  22.             </div>  
  23.         </div>  
  24.   
  25.         <div class="form-group">  
  26.             @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" })  
  27.             <div class="col-md-10">  
  28.                 @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } })  
  29.                 @Html.ValidationMessageFor(model => model.Price, ""new { @class = "text-danger" })  
  30.             </div>  
  31.         </div>  
  32.   
  33.         <div class="form-group">  
  34.             <div class="col-md-offset-2 col-md-10">  
  35.                 <input type="submit" value="Create" class="btn btn-default" />  
  36.             </div>  
  37.         </div>  
  38.     </div>  
  39. }  
  40.   
  41. <div>  
  42.     @Html.ActionLink("Back to List""Index")  
  43. </div>  

服务端验证

实现自定义的服务端验证非常简单,我们只需要继承ValidationAttribute类,然后重写IsValid()方法即可

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace me.lisen.MVC.Public  
  9. {  
  10.     public class PriceValid:ValidationAttribute  
  11.     {  
  12.         public double MinPrice { getset; }  
  13.   
  14.               public override bool IsValid(object value)  
  15.         {  
  16.             if (value == null)  
  17.             {  
  18.                 return true;  
  19.             }  
  20.             var price = Convert.ToDouble(value);  
  21.             if(price < MinPrice)  
  22.             {  
  23.                 return false;  
  24.             }  
  25.             return true;  
  26.         }  
  27.     }  
  28. }  

返回truefalse代表验证是否通过。

客户端验证

自定义客户端验证就比较繁琐了,我们需要实现IClientValidatable接口的, public IEnumerable GetClientValidationRules(ModelMetadata metadata, ControllerContext context)方法,然后在方法中定义传递给js的方法名以及方法参数。

第一步,实现接口IClientValidatable

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel.DataAnnotations;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Mvc;  
  7.   
  8. namespace me.lisen.MVC.Public  
  9. {  
  10.     public class PriceValid:ValidationAttribute,IClientValidatable  
  11.     {  
  12.         public double MinPrice { getset; }  
  13.   
  14.         public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)  
  15.         {  
  16.             var rule = new ModelClientValidationRule();  
  17.             rule.ErrorMessage = metadata.GetDisplayName() + "不能小于系统限制";  
  18.             rule.ValidationParameters.Add("minprice", MinPrice);  
  19.             rule.ValidationType = "price";  
  20.             yield return rule;  
  21.         }  
  22.   
  23.         public override bool IsValid(object value)  
  24.         {  
  25.             if (value == null)  
  26.             {  
  27.                 return true;  
  28.             }  
  29.             var price = Convert.ToDouble(value);  
  30.             if(price < MinPrice)  
  31.             {  
  32.                 return false;  
  33.             }  
  34.             return true;  
  35.         }  
  36.     }  
  37. }  

第二部,添加js文件

  1. /* 
  2. 第一个参数是服务端ValidationType值 
  3. 第二个参数必须是ValidationParameters.Add()的值 
  4. */  
  5.   
  6. $.validator.unobtrusive.adapters.addSingleVal("price""minprice");  
  7.   
  8. $.validator.addMethod("price"function (value, element, param) {  
  9.     if (value) {  
  10.         var inputValue = parseInt(value, 10);  
  11.         var validateValue = parseInt(param, 10);  
  12.         if (inputValue < validateValue) {  
  13.             return false;  
  14.         }  
  15.     }  
  16.     return true;  
  17. });  

第三步,页面引入js文件

本文地址:https://www.lisen.me/asp-net-mvc-client-and-server-verifying.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

  1. 中青看点
    中青看点 【农民】 @回复

    这样精彩的博客越来越少咯!

  2. 中医秘方
    中医秘方 【农民】 @回复

    一言不发岂能证明我来过了?!