[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 > 按右鍵 > 加入 > 新增項目」。

選擇「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>

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

mixins: [mixin],

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

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

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

範例下載

連結 GitHub 下載範例

推薦課程

• Bootstrap 5 網頁切版整合術
• Vue 3 實戰影音課程

相關學習文章

• [ASP.NET Core MVC + Vue3 + Dapper] 前後台網站公告範例 – 後台查詢頁面教學 #CH1
• [ASP.NET MVC] 免費公司形象網站範本套版教學 #CH1 (附範例)