如何用jQuery遍历ID以数字结尾的元素获取非空手机号输入值

AI 小北

2026-8-30

问题修复与实现方案

原代码存在两处核心问题：

语法错误：JavaScript 中if关键字后的条件表达式必须包裹在圆括号内，原写法if !(phn.val())不符合语法规则，正确写法为if (!phn.val())
逻辑缺失：原代码仅做空值打印，未实现收集非空手机号的需求

下面提供两种可直接运行的实现方式：

方式1：沿用原有按序号遍历的思路（修正版）

适合输入框序号固定的场景，修正语法问题后补充非空值收集逻辑，同时增加首尾空格过滤，避免用户输入全空格的无效内容：

const nmbr = [1, 2, 3, 4, 5];
const validPhones = [];

$.each(nmbr, function(index, value){
  const $phn = $("#phone" + value);
  const phoneVal = $phn.val().trim();
  if (!phoneVal) {
    console.log(`第${value}个手机号未填写`);
    return true; // 跳过当前空项，继续后续遍历
  }
  validPhones.push(phoneVal);
});

// 最终拿到所有非空手机号
console.log('非空手机号列表：', validPhones);

针对你给出的示例DOM结构，运行后validPhones的输出结果为["1111111111", "3333333333", "4444444444"]。

方式2：属性选择器匹配（无需硬编码序号）

如果后续可能增减同规则的手机号输入框，不需要手动维护序号数组，直接用jQuery的属性前缀选择器，匹配所有id以phone开头的文本输入框即可：

const validPhones = [];

// 选择所有id以phone开头的文本输入框，自动遍历
$('input[type="text"][id^="phone"]').each(function() {
  const phoneVal = $(this).val().trim();
  if (!phoneVal) {
    console.log(`输入框${this.id}内容为空`);
    return true;
  }
  validPhones.push(phoneVal);
});

console.log('非空手机号列表：', validPhones);