本文介绍如何使用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>
代码解释:
立即学习“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的值。
注意事项
- 错误处理: 在实际应用中，可以添加更完善的错误处理机制，例如，使用正则表达式更精确地验证手机号码格式。
- 用户体验: 可以考虑使用input事件或keyup事件，实时更新号码计数，提供更好的用户体验。但需要注意性能优化，避免频繁更新DOM导致页面卡顿。
- 服务器端验证: 务必在服务器端对提交的手机号码进行再次验证，防止恶意用户绕过客户端验证。
总结
通过以上步骤，你就可以在PHP表单中实现textarea手机号码的提取、过滤和统计功能。这种方法简单有效，能够满足基本的需求。 进一步优化，可以考虑使用更强大的正则表达式进行号码验证，并结合服务器端验证，确保数据的准确性和安全性。
评论（已关闭）
评论已关闭