如何在 PHP 表单中实时清洗并统计文本域中的 10 位手机号数量-php教程-PHP中文网

如何在 PHP 表单中实时清洗并统计文本域中的 10 位手机号数量

本文介绍如何在 html 表单的 textarea 中自动过滤出合法的 10 位纯数字手机号（剔除空格、符号、超长/不足位数等无效内容），同时保持行数统计功能不中断，兼容手动输入与粘贴操作。

本文介绍如何在 html 表单的 textarea 中自动过滤出合法的 10 位纯数字手机号（剔除空格、符号、超长/不足位数等无效内容），同时保持行数统计功能不中断，兼容手动输入与粘贴操作。

在处理批量手机号提交的表单场景中，用户常通过复制粘贴方式输入数百个号码（每行一个），但原始数据往往混杂空格、+86 前缀、短号或超长号码（如 +1236547890 或 99491234561）。若仅依赖后端校验，不仅体验差，还可能因无效数据干扰前端计数逻辑（如 onKeyUp="countline()" 误将空行、含空格行计入总数）。因此，需在用户输入/粘贴后、提交前，实时清洗并精确统计有效号码。

以下方案采用 input 事件 + 正则预处理，兼顾健壮性与响应性，替代原 onKeyUp 的粗粒度监听，并彻底解决“清洗后计数失效”问题：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 推荐实现（稳定、精准、无副作用）

<script>
document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.getElementById('mobileno');
  const countInput = document.getElementById('numbercount');

  // 核心清洗与统计函数
  function cleanAndCount() {
    // 1. 按换行分割，逐行处理
    const lines = textarea.value.split('\n');
    const validNumbers = [];

    for (let line of lines) {
      // 2. 移除所有非数字字符（保留纯数字）
      let cleaned = line.replace(/\D/g, '');
      // 3. 严格匹配：仅当长度恰好为10时保留
      if (cleaned.length === 10) {
        validNumbers.push(cleaned);
      }
    }

    // 4. 重新拼接为换行分隔的字符串（确保格式统一）
    textarea.value = validNumbers.join('\n');
    // 5. 更新计数（即有效号码行数）
    countInput.value = validNumbers.length;
  }

  // 监听 input 事件（覆盖 paste、typing、delete 等所有变更）
  textarea.addEventListener('input', cleanAndCount);
  // 页面加载后立即执行一次，确保初始值合规
  cleanAndCount();
});
</script>

? 关键设计说明

input 事件替代 onKeyUp：input 在任何值变更时触发（包括粘贴、拖放、剪切、键盘输入、甚至语音输入），而 keyup 无法捕获鼠标粘贴，是导致计数失效的主因。
正则 \D/g 全局清理：比 indexOf("+") 更可靠，可清除 +、空格、横线、括号等任意非数字字符（如 9949 123456 → 9949123456 → 符合10位）。
严格长度校验：cleaned.length === 10 确保仅保留中国标准手机号（11位需额外适配，本文按题设10位处理；如需支持11位，修改此处即可）。
自动重排格式：清洗后强制用 \n 连接，避免残留空行或混乱换行符影响后续处理。
DOM 加载后初始化：防止脚本执行早于元素渲染，且首次加载即清洗初始值。

⚠️ 注意事项

若需兼容国际号码（如带国家码 +919848012345），建议先提取末10位（num.slice(-10)）再校验，而非简单去除非数字——否则 +919848012345 会变成 919848012345（12位）被丢弃。
后端必须二次校验：前端清洗仅为体验优化，不可替代服务端验证（防止绕过 JS 提交恶意数据）。
如需高亮无效行或提示错误，可扩展 cleanAndCount() 函数，记录清洗日志并显示 Toast 提示。

此方案在保持代码简洁的同时，彻底解决了清洗与计数的耦合问题，确保用户每次输入后，文本域中仅存合规号码，且计数器实时、准确反映有效条目数。