ASP.NET Core MVC自定义客户端验证

原创 Laughing  2017-10-29 13:31  阅读 615 次 评论 0 条

上一篇文章,我们介绍了,


但是将验证放到服务端会导致客户端与服务端的交互,影响性能,除此之外,我们可以在服务端和客户端都进行验证,增加认证的准确性。

如何实现客户端验证

首先,我们要明确的是,ASP.NET Core的发客户端验证是通过jquery validate插件进行验证的,所以我们完全可以通过jquery validate原始的方式进行验证。

使用jquery validate进行验证

  1. $("#ProductForm").validate({  
  2.     rules:{  
  3.         Price:{  
  4.         required:true,  
  5.         number:true  
  6.         }  
  7.     },  
  8.     messages:{  
  9.     Price:{  
  10.     required:"必须输入",  
  11.     number:"只允许输入数值"  
  12.     }  
  13.     }  
  14. });  

使用jquery validate方法进行验证,如果我们界面预算比较多时,仍然会比较麻烦,在MVC中,我们可以很方便的定义客户端验证,但是在ASP.NET Core中似乎使用客户端验证也比较麻烦,如果大家有了解的可以在留言回复一下。

实现自定义客户端验证

首先我们需要修改自定义验证的类,同时继承IClientModelValidator接口,实现客户端验证

  1. using System;  
  2. using System.ComponentModel.DataAnnotations;  
  3. using Microsoft.AspNetCore.Mvc.ModelBinding.Validation;  
  4. using System.Collections.Generic;  
  5. using System.Net.Mime;  
  6.   
  7. namespace NetCoreStudy.WebUI.Extensions.Attribute.Validate  
  8. {  
  9.     public class PriceValidateAttribute : ValidationAttribute,IClientModelValidator  
  10.     {  
  11.         public double MinPrice { get; set; }  
  12.         public override bool IsValid(object value)  
  13.         {  
  14.             if (value == null)  
  15.             {  
  16.                 return true;  
  17.             }  
  18.             var price = Convert.ToDouble(value);  
  19.             if (price < MinPrice)  
  20.             {  
  21.                 return false;  
  22.             }  
  23.             return true;  
  24.         }  
  25.   
  26.   
  27.   
  28.         public override string FormatErrorMessage(string name)  
  29.         {  
  30.             return name + " 的价格低于系统限制";  
  31.         }  
  32.   
  33.         public void AddValidation(ClientModelValidationContext context)  
  34.         {  
  35.             MergeAttribute(context.Attributes,"data-val","true");  
  36.             var errorMsg = FormatErrorMessage(context.ModelMetadata.GetDisplayName());  
  37.             MergeAttribute(context.Attributes,"data-val-PriceValidate",errorMsg);  
  38.         }  
  39.   
  40.         private bool MergeAttribute(IDictionary<string,string> attributes,string key,string value){  
  41.             if(attributes.ContainsKey(key)){  
  42.                 return false;  
  43.             }  
  44.             attributes.Add(key,value);  
  45.             return true;  
  46.         }  
  47.     }  
  48. }  

然后需要修改我们的js代码

  1. /* 
  2. $("#ProductForm").validate({ 
  3.     rules:{ 
  4.         Price:{ 
  5.         required:true, 
  6.         number:true 
  7.         } 
  8.     }, 
  9.     messages:{ 
  10.     Price:{ 
  11.     required:"必须输入", 
  12.     number:"只允许输入数值" 
  13.     } 
  14.     } 
  15. }); 
  16. */  
  17. $.validator.addMethod("PriceValidate",function(value,element,param){  
  18.     if(parseFloat(value) <9){  
  19.     return false;  
  20.     }  
  21.     return true;  
  22. });  
  23. $.validator.unobtrusive.adapters.add("PriceValidate", [], function (options) {  
  24.             options.rules.PriceValidate = {};  
  25.             options.messages["PriceValidate"] = options.message;  
  26.         });  

通过以上方式,即可实现客户端的验证

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

发表评论


表情