手機號中間四位星號顯示：前端展示與數據提交分離方案

需求場景

在 JSP 列表頁面點擊編輯進入編輯頁，手機號中間四位顯示為星號（如 `138****1234`），但提交表單時不能將星號存入數據庫，需提交完整手機號。列表頁不顯示手機號，僅編輯頁掩碼展示。

核心思路

展示與提交分離：前端通過 JavaScript 處理顯示邏輯，提交時從隱藏域獲取原始數據。

實現步驟

1. 頁面加載時：後端返回完整手機號，前端將其存入隱藏 ``，同時在可見輸入框顯示掩碼後的號碼（`138****5678`）。
2. 用戶編輯時：監聽輸入框 `input` 事件，同步更新隱藏域的完整值，並即時刷新顯示為掩碼格式。
3. 表單提交時：只提交隱藏域 `realPhone` 的值，可見輸入框設置 `disabled` 或移除 `name` 屬性，防止星號被提交。

關鍵代碼示例

// 頁面初始化
$('#phoneDisplay').val(maskPhone(realPhone));
$('#realPhone').val(realPhone);

// 用戶輸入監聽
$('#phoneDisplay').on('input', function() {
    var raw = $(this).val().replace(/\*/g, ''); // 簡易處理，實際需更健壯
    $('#realPhone').val(raw);
    $(this).val(maskPhone(raw));
});

// 提交前處理
$('form').submit(function() {
    $('#phoneDisplay').removeAttr('name'); // 不提交顯示框
    return true;
});

function maskPhone(phone) {
    if (!phone || phone.length !== 11) return phone;
    return phone.substr(0, 3) + '****' + phone.substr(7);
}

注意事項

• 若允許用戶修改手機號，需在輸入時同步驗證格式（如 11 位數字）。
• 後端接收參數時直接讀取 `realPhone` 字段，忽略顯示字段。
• 安全性：掩碼僅為前端展示，傳輸與存儲均應使用完整加密或脫敏策略。

總結

通過「隱藏域存真值、顯示框掩碼、提交取隱藏域」的模式，完美解決展示與提交不一致的問題，且不改動後端邏輯。