統一欄位格式定義及驗證設計範例 – 前端驗證

[ASP.NET Core MVC][Vue3] 統一欄位格式定義及驗證設計範例 – 前端驗證 #CH2

在開發網站系統設計階段,對於欄位格式定義 (Data Annotation) 及驗證 (Validate) 就要先設計好,讓相同欄位在不同頁面使用時,都能維持相同的格式驗證,當欄位格式有異動時,也只需要修改一個地方就好,讓所有使用到的頁面都能一致同步修改。

上一篇文章我們完成了後端驗證,接著這一篇文章會繼續完成前端驗證。

此範例環境使用 ASP.NET Core MVC 版本是 .NET6,前端使用 Vue3 框架,後端使用 Dapper 套件連接 SQL Server 2019,文末有範例可以下載。

此前端範例我會先在 View 頁面實作範例內容,最後再將方法抽離至共用區裡面。
我建立的前端驗證方法跟 ASP.NET MVC 前端驗證方法有所不同,這是適用在 Vue 3 的統一驗證方法,有興趣的人可以多學一種前端驗證。

前端欄位建立控制物件

在上一篇文章裡面,我宣告欄位時是直接將欄位宣告為值,所以在 <input> 時直接將值放在欄位上。

這裡要做一點修改,我們改成將欄位宣告成一個物件,而物件裡面包含名稱、格式、長度、值等屬性,這樣就可以透過屬性來檢查輸入內容。

在 \Views\Home\Index.cshtml 的 Vue3 方法,我們將 data 區,改成以下語法:

然後新增 Create() 方法。

這裡我們將原本的 addForm 改成宣告欄位陣列,目的要依陣列呼叫 CreateFormControl() 方法產生控制物件。
產生控制物件後,我們再取得資料庫的 ColumnDefine 欄位定義,將每個欄位附加該有的定義。
ColumnDefines 會由 Controller 傳送。

這裡有兩個新的方法 CreateFormControl()BindDDFormat(),我們在下方的 methods 加上此方法:

Controller 增加回傳欄位定義

語法 JSON.parse('@Html.Raw(ViewData["ColumnDefines"])'); 是接收 Controller 傳來的資料,這裡我們打開 \Controllers\HomeController.cs 在 public IActionResult Index() 裡面增加回傳 ColumnDefines

對於想要將此語法抽離至共用區也是可以的,可以宣告一個類別,繼承 Controller,然後覆寫 public override void OnActionExecuting(ActionExecutingContext context) 方法,然後將此語法放在裡面。
然後將 HomeController 繼承新類別就可以了。

修改輸入欄位

接著將上面的各個 <input> 欄位也修改一下,改成讀取欄位控制物件,修改語法如下:

在每個 <input> 輸入資料時,都會呼叫 Validate() 檢查方法,所以我們在下方的 methods 加入此方法:

這裡的 Validate() 方法跟後端的 Validate() 其實在做一樣的事情,就是驗證資料內容,而這裡是針對前端欄位的 onblur 事件立即檢查內容,當檢查失敗時則清空內容並設定 focus()

檢查必填欄位

接下來驗證前端欄位的必填屬性,這做法類似後端的 [Required] 設定。
我剛剛在 created() 裡面有設定了欄位為必填,語法是 self.addForm.StudentID.required = true;
接著修改一下 AddSave() 方法,在送出資料到後端之前,先驗證欄位是否已必填。

語法 CheckRequired() 是新方法,接著在 methods 增加此方法:

測試範例

做到這裡已完成所有的語法,可以按 F5 執行一下專案,當所有欄位都沒有輸入時,按下「儲存」則會顯示需要必填的欄位訊息。

測試範例

當單一欄位輸入後離開欄位焦點觸發 onblur 事件,即會檢查內容是否符合驗證,當驗證失敗就會顯示錯誤內容。

測試範例

建立 Vue3 前端共用方法

當我們在後端驗證資料時,會透過在 ModelBase 類別裡面的 Validate() 方法統一檢查輸入資料,而我們在前端驗證資料時,也會建立一個共用方法,讓不同頁面可以共用呼叫。

在 Vue3 要建立共用方法可以使用到 mixins 的混合功能,mixins 可以將 data, method 及生命週期事件抽離至外部檔案再引用,很適合做為共用元件。

當我們在 created() 內所呼叫的方法 CreateFormControl(), BindColumnDefine() 以及前端欄位輸入資料的方法 Validate(), CheckRequired() 很適合放在共用區,接著就來實作這個共用方法。

執行「wwwroot > js > 按右鍵 > 加入 > 新增項目」。

執行「wwwroot > js > 按右鍵 > 加入 > 新增項目」

選擇「JavaScript 檔」,輸入名稱「vueMixin.js」,按「新增」。

選擇「JavaScript 檔」,輸入名稱「vueMixin.js」,按「新增」

接著把剛剛在 methods 裡面這 4 個方法還有 ColumnDefines 抽離至 vueMixin.js 裡面,直接輸入以下語法:

當 4 個方法及 ColumnDefines 抽離至 vueMixin 之後,就可以從 Vue3 物件裡面拿掉了。

加入 vueMixin.js 引用

打開「\Views\Shared\_Layout.cshtml」,在下方的 Javascript 引用區加入引用:

<script src="~/js/vueMixin.js"></script>

加入 vueMixin.js 引用

接著回到 \Views\Home\Index.cshtml,在 Vue3 加入 mixins 引用:

mixins: [mixin],

在 Vue3 加入 mixins 引用

當共用方法抽離至共用區之後,前端的語法就會變的簡單,這裡貼上完整 Index.cshtml 的語法:

前端語法變簡潔了,該共用的語法移至共用區,你可以再按 F5 檢查一下驗證功能是否都正常運作。

以上我的教學並非是主流方式,而是我個人發展出來的專案架構,幫助想要達成統一驗證的人一種思考方式,如果此做法有盲點或是 Bug,歡迎指教,謝謝。

範例下載

連結 GitHub 下載範例

推薦課程

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG