如何在Magento 2 中客製化表單欄位驗證規則
Magento 2 本身提供有一些表單驗證方法，其中關於電話號碼欄位只有提供US或UK的格式檢查。因此這篇文章就要跟大家分享如何在以下表單為客戶地址的電話號碼新增特定的驗證規則：
- 客戶帳號頁面的地址通訊錄
- 結帳頁的新增地址表單
從這篇文章你會知道：
如何在 Magento 2 中客製化表單欄位驗證規則（本文章以新增驗證台灣手機號碼格式為範例）
Magento表單的資料透過validator.js進行驗證，我們可以透過建立 Javascript mixin 並使用自訂驗證規則參數呼叫 $.validator.addMethod 函數來新增自訂驗證規則。由於客戶帳號和結帳頁面使用的驗證資料不同，因此需要新增兩個mixin。
首先，先建立檔案Vendor/Module/view/frontend/requirejs-config.js來宣告他們
接下來我們可以建立兩個mixin檔案來新增新的驗證規則
- 客戶帳號的驗證 Vendor/Module/view/frontend/web/js/validation-mixin.js
- 結帳頁面的驗證 Vendor/Module/view/frontend/web/js/validator-mixin.js
現在透過在 class屬性中新增類別validate-mobile-tw ，即可以在任何地方使用此驗證規則。
- 在template屬性中手動新增驗證validate-mobile-tw
- 透過Plugin加入驗證規則
以下會示範，如何不改動template，透過plugin加入規則。在客戶帳號的部分，Magento使用屬性程式碼呼叫函數\Magento\Customer\Helper\Address::getAttributeValidationClass，因此我們將建立一個plugin after。
首先，我們在模組的di.xml 檔案中宣告plugin：
接著新增檔案中的外掛程式管理類別：
Plugin/Magento/Customer/Helper/AddressPlugin.php
透過上述程式碼，客戶帳號的手機號碼驗證部分已完成。
而在結帳頁面中，欄位屬性的配置在\Magento\Checkout\Block\Checkout\AttributeMerger::merge
因此我們將在該函數中新增驗證規則。
首先，我們在etc/di.xml檔案中宣告plugin：
接著新增檔案中的外掛程式管理類別：Plugin\Magento\Checkout\Block\AttributeMergerPlugin.php
透過上述程式碼，結帳頁面的地址欄位中，手機號碼驗證的部分已完成。
〖參考資料來源〗：
以上就是歐斯瑞本次 『如何在 Magento 2 中客製化表單欄位驗證規則』 的分享
我要留言