本文介绍如何在 html 表单的 textarea 中自动过滤出合法的 10 位纯数字手机号（剔除空格、符号、超长/不足位数等无效内容），同时保持行数统计功能不中断，兼容手动输入与粘贴操作。
本文介绍如何在 html 表单的 textarea 中自动过滤出合法的 10 位纯数字手机号（剔除空格、符号、超长/不足位数等无效内容），同时保持行数统计功能不中断，兼容手动输入与粘贴操作。
在处理批量手机号提交的表单场景中，用户常通过复制粘贴方式输入数百个号码（每行一个），但原始数据往往混杂空格、+86 前缀、短号或超长号码（如 +1236547890 或 99491234561）。若仅依赖后端校验，不仅体验差，还可能因无效数据干扰前端计数逻辑（如 onKeyUp="countline()" 误将空行、含空格行计入总数）。因此，需在用户输入/粘贴后、提交前，实时清洗并精确统计有效号码。
以下方案采用 input 事件 + 正则预处理，兼顾健壮性与响应性，替代原 onKeyUp 的粗粒度监听，并彻底解决“清洗后计数失效”问题：
✅ 推荐实现（稳定、精准、无副作用）
<form class="form" method="post" enctype="multipart/form-data">
<div class="form-group row">
<label for="title" class="col-lg-2 col-form-label">Mobile Numbers</label>
<div class="col-lg-10">
<textarea
required
class="form-control required"
cols="10"
rows="7"
id="mobileno"
name="mobileno"
></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-2 control-label" for="userName">Number Count</label>
<div class="col-lg-10">
<input
type="text"
class="form-control"
readonly
id="numbercount"
name="numbercount"
value="0"
>
</div>
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<button type="submit" class="btn btn-success btn-lg">SUBMIT</button>
</div>
</div>
</form><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 提示。
此方案在保持代码简洁的同时，彻底解决了清洗与计数的耦合问题，确保用户每次输入后，文本域中仅存合规号码，且计数器实时、准确反映有效条目数。
