EP 25: Validation by Data Annotation Validators in TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP25。

目前在 TopStore App 当中，如果使用到 PersonDetailPage 输入联络人资料的时候，一定会有个疑虑，那使用者输入资料的格式验证该怎处理?

在微软的官方文件上有一篇教学 "Validation in Enterprise Apps" :
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/validation

基本上如果有兴趣的捧友，可以好好的研究该篇文件教学。

不过由於实作上太复杂，本专案只是个小小的 App 撰写，需要验证资料的部分希望能简易一些，而如果各位有写过 ASP.NET MVC 或 .NET 类似的程序，应该对 "Data Annotation Validators" 的技术不陌生。

本篇 EP25 就来 "致敬" 这样的验证方式来完成吧!

那就开始罗~~~

首先，先在 Xamarin.Forms 专案来安装 "Data Annotation" 的 Nuget 套件。

在 Xamarin.Forms 专案右键选单点选 "管理 Nuget 套件"。

打开 "管理 Nuget 套件"，点选 "浏览"。

搜寻 "DataAnnotations" 关键字。

找到 System.ComponentModel.DataAnnotations 这个套件，并且点选 "安装"。

安装完成後，在 Xamarin.Forms 的专案中确认一下所安装的 Nuget 套件。

接着在 Utilities 资料夹新增一个类别。

把该类别命名为 ValidationHelper。

加入完成後的原始类别档案。

引用所需要的命名空间。

撰写其 ValidationHelper 内容。

接着就打开 Person 类别，引用 System.ComponentModel.DataAnnotations 的命名空间之後，即可帮 Person 各个属性上挂上 DataAnnotations 所需的 Validation Attritube。

接着再打开 PersonDetailPage。

并且针对每个 Entry 下方都再多设计一个 Label 来做为提示讯息要显示的控制项。

注意其 Label 有设计 x:Name 的命名为 "系结属性名称" + "Error"，且 IsVisible 设定为 "False"，颜色设定只是为了显眼而已。

完成後，打开 PersonDetailPageViewModel 并找到其 SaveCommand 的 Command 设计，在其中多增加 ValidationHelper 的 IsValid 方法呼叫，并判断输入资料验证失败时，不执行後续储存的动作。

接下来就在双平台(iOS、Android) 来执行看看吧!

联络人列表点选 "新增"。

进入到 "联络人详细资料"。

什麽都不打直接点选 "储存"，出现 Validation Error 的文字。

打错误的 "电话" 与 "Email" 格式资料，点选 "储存"，出现 Validation Error 的文字。

Ya! 完成~~~

下回 EP26 见罗!

搭啦嘎呀逼~~~

参考连结:

1. System.ComponentModel.Dataannotations:
   https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations
2. Xamarin Forms - Validations Made Simple:
   https://www.codeproject.com/Articles/1274851/Xamarin-Forms-Validations-made-simple