功能需求
在現代電子商務網站中，為用戶提供流暢且無誤的購物體驗是至關重要的。特別是在結帳過程中，資料的正確性直接影響到訂單的處理效率。為了提升 WooCommerce 網站的用戶體驗，我們設計了一個專用的電話號碼欄位驗證功能，確保用戶在結帳頁面上輸入的電話號碼符合規定。
功能特點
- 數字輸入限制：欄位僅接受數字輸入，防止用戶輸入字母或特殊符號，保障電話號碼的正確性。
- 全形轉半形自動轉換：考慮到有些用戶可能會使用全形數字輸入，我們的功能能夠自動將全形數字轉換為半形，無需用戶手動更改。
- 輸入長度限制：為避免輸入錯誤，欄位限制電話號碼的最大長度為10位數字，超過此限制將顯示錯誤提示。
- 即時錯誤提示：在用戶輸入過程中，若偵測到非數字字符，欄位會顯示「請輸入數字」的錯誤提示，幫助用戶即時更正輸入錯誤。
- 防止錯誤提交：若用戶未修正輸入錯誤，表單將無法提交，並彈出提示確保用戶意識到需要修正欄位內容。
程式碼
function custom_checkout_field_validation() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
// 選擇需要檢查的欄位
const phoneFields = ['#billing_phone', '#shipping_phone'];
phoneFields.forEach(function(field) {
$(field).on('input', function() {
let value = $(this).val();
// 將全形數字轉換為半形數字
const halfWidthValue = value.replace(/[０-９]/g, function(s) {
return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
});
// 過濾掉非數字字符
const filteredValue = halfWidthValue.replace(/\D/g, '');
if (halfWidthValue !== filteredValue) {
$(this).next('.error-message').remove();
$(this).after('<span class="error-message" style="color:red;">不可輸入數字以外的內容</span>');
} else {
$(this).next('.error-message').remove();
}
// 更新輸入框的值
$(this).val(filteredValue);
// 檢查是否長度不超過10
if (filteredValue.length > 10) {
$(this).next('.error-message').remove();
$(this).after('<span class="error-message" style="color:red;">電話長度超過限制(10碼)，如需額外增加資訊，例如：分機或其他聯絡電話，請填寫於地址後面</span>');
}
});
});
// 結帳提交時的驗證
$('form.checkout').on('checkout_place_order', function(e){
let isValid = true;
phoneFields.forEach(function(field) {
const value = $(field).val();
if (!/^\d{1,10}$/.test(value)) {
isValid = false;
$(field).next('.error-message').remove();
$(field).after('<span class="error-message" style="color:red;">電話長度超過限制(10碼)，如需額外增加資訊，例如：分機或其他聯絡電話，請填寫於地址後面</span>');
}
});
if (!isValid) {
e.preventDefault(); // 阻止表單提交
alert('【訂單無法結帳】電話長度超過限制(10碼)，如需額外增加資訊，例如：分機或其他聯絡電話，請填寫於地址後面');
return false; // 返回false以確保表單不會提交
}
});
});
</script>
<?php
}
add_action('wp_footer', 'custom_checkout_field_validation');
為什麼這個功能重要？
- 減少訂單處理錯誤：確保電話號碼的格式正確，可以有效減少因聯繫方式錯誤而導致的訂單延誤或錯誤。
- 提升用戶體驗：即時反饋和自動更正功能使得用戶在結帳時不必為格式問題而感到煩惱，提升整體使用體驗。
- 提高網站專業性：提供精確的數據輸入限制功能，讓網站在用戶心中顯得更為專業，增加信任感。
透過這些功能，我們的 WooCommerce 商店結帳體驗將會更加無縫且高效。這不僅是為了提升技術功能，更是為了向用戶展示我們對細節和客戶體驗的關注。無論是對開發者還是店主來說，這都是一個不可或缺的功能升級。