输入框输入手机号全程脱敏

Question

输入手机号的同时进行信息脱敏的需求,边输入边脱敏,前端显示脱敏信息,传给后端的要明文

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在前端实现输入手机号时边输入边脱敏的需求，是一个常见的安全与用户体验结合的场景。目标是：

• 用户输入时显示脱敏信息（如：138****1234）
• 传给后端时使用明文手机号

下面将从需求分析、解决方案、代码实现三个方面进行详细说明。

---

一、需求分析

1.1 脱敏规则

通常手机号脱敏规则如下：

• 前3位 + 中间4位隐藏（用*代替） + 后4位
• 示例：13812345678 → 138****5678

1.2 显示与传输分离

• 前端展示：显示脱敏后的手机号
• 后端传输：发送原始手机号（明文）

1.3 输入限制

• 用户只能输入数字
• 手机号长度应为11位

---

二、解决方案

以下是实现该功能的完整方案：

2.1 HTML 结构

<input type="text" id="phoneInput" placeholder="请输入手机号" maxlength="11">
<p id="maskedPhone">请输入手机号</p>

2.2 JavaScript 实现逻辑

步骤说明：

1. 监听输入框的 input 事件
2. 获取用户输入内容
3. 格式化为脱敏格式并更新显示
4. 将原始内容保存到变量中用于提交

完整代码如下：

const input = document.getElementById('phoneInput');
const display = document.getElementById('maskedPhone');

input.addEventListener('input', function () {
    const rawValue = this.value;
    let maskedValue = '';

    // 仅允许数字输入
    if (!/^\d*$/.test(rawValue)) {
        this.value = rawValue.replace(/\D/g, '');
        return;
    }

    // 如果输入为空或不足11位，直接显示原值
    if (rawValue.length < 11) {
        maskedValue = rawValue;
    } else {
        // 脱敏逻辑
        maskedValue = rawValue.slice(0, 3) + '****' + rawValue.slice(7);
    }

    display.textContent = maskedValue;

    // 存储原始值用于后续提交
    window.rawPhone = rawValue;
});

2.3 提交数据时使用原始手机号

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const phone = window.rawPhone; // 使用原始手机号
    console.log('提交的手机号:', phone);
    // 这里可以发送到后端
});

---

三、关键点总结

1. 输入限制：只允许输入数字，并自动过滤非数字字符。
2. 脱敏逻辑：根据手机号长度动态处理脱敏方式。
3. 存储原始值：通过全局变量或组件状态保存原始手机号，确保后端接收到的是明文。
4. 用户体验：实时显示脱敏结果，提升安全性与用户信任感。

---

四、扩展建议

• 可以添加 手机号格式校验（如：是否为11位、是否符合手机号规范）
• 可以结合 Vue/React 等框架 实现更优雅的状态管理
• 若需兼容旧浏览器，可使用 正则表达式替代 slice 方法

---

如果你需要基于 Vue 或 React 的实现示例，也可以告诉我，我可以为你提供相应的代码片段。