PHP表单textarea中提取和统计有效手机号码

DDD

发布时间：2025-08-13 22:24:15

517人浏览过

来源于php中文网

原创

php表单textarea中提取和统计有效手机号码

本文介绍如何使用JavaScript在PHP表单的textarea字段中提取并统计有效的10位手机号码。通过监听mouseout事件，在用户离开textarea后，脚本会自动过滤掉无效号码，仅保留符合要求的10位数字号码，并更新号码计数。这种方法既保证了数据清洗，又保留了号码统计功能。

实现步骤

HTML表单结构:

首先，确保你的HTML表单包含一个textarea字段用于输入手机号码，以及一个只读的input字段用于显示号码计数。

<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 require  type="text" class="form-control required" 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" required name="numbercount" value="">
        </div>
    </div>

    <div class="form-group row">
        <div class="col-lg-12 text-center">
            <button id="btn" type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">SUBMIT </button>
        </div>
    </div>
</form>

JavaScript代码:

接下来，使用JavaScript来处理textarea中的数据。主要步骤包括：

获取textarea和计数input的引用。
监听textarea的mouseout事件。
在事件处理函数中，获取textarea的值，按行分割。
遍历每一行，检查是否为有效的10位数字号码。
将有效的号码重新拼接成字符串，更新textarea的值。
更新号码计数input的值。

<script>
let numbers =document.querySelector('#mobileno');
let numbercount =document.querySelector('#numbercount');
addEventListener('mouseout',getNumbers);
function getNumbers(event){
event.preventDefault();
let getnums = numbers.value.trim();
getnums = getnums.split("\n");

let result = "";
let totalNum = 0;
getnums.forEach(num => {
    if(num.length ==10 && num.indexOf("+")){
        result += num.substring(0, 10) + "\n";
        totalNum++;
    }
});
numbers.value = result;
numbercount.value = totalNum;
}
</script>

代码解释:

Cursor

一个新的IDE，使用AI来帮助您重构、理解、调试和编写代码。

下载

立即学习“PHP免费学习笔记（深入）”；

document.querySelector('#mobileno') 和 document.querySelector('#numbercount')：分别获取textarea和计数input的DOM元素。
addEventListener('mouseout',getNumbers)：为textarea添加mouseout事件监听器，当鼠标移出textarea时触发getNumbers函数。
event.preventDefault()：阻止默认事件行为。
numbers.value.trim()：获取textarea的值，并去除首尾空格。
getnums = getnums.split("\n")：将textarea的值按行分割成数组。
getnums.forEach(num => { ... })：遍历号码数组，对每个号码进行验证。
if(num.length ==10 && num.indexOf("+"))：检查号码长度是否为10位，且不包含"+"号，以确保为有效的手机号码。
result += num.substring(0, 10) + "\n"：将有效的号码添加到结果字符串中，并添加换行符。
totalNum++：增加有效号码计数。
numbers.value = result：更新textarea的值为过滤后的有效号码。
numbercount.value = totalNum：更新号码计数input的值。