如何区分输入框内的值类型（邮箱/手机号）并实现联系人信息展示

安全阿岳

2026-10-1

你不需要额外写逻辑判断输入内容是邮箱还是手机号，你已经通过下拉框让用户选择了联系方式类型，直接读取下拉框的选中值就能确定对应的展示类型，比正则校验输入内容的准确率更高。
下面是具体修改步骤：

步骤1：修正手机号输入框的type属性

原代码里手机号输入框的type错设为了email，改为tel更合理，只需要修改addpoc函数里对应的html片段即可：

<!-- 把原来的手机号输入框代码替换为下面的 -->
<input class="mailvalue" type="tel" name="workphone" placeholder="Work Phone">

步骤2：修改`contine`函数的逻辑

修改后的函数可以直接读取每个联系块的所有信息，一次性完成拼接展示：

function contine() {
  // 每次展示前先清空之前的内容，避免重复追加
  document.getElementById("contact").innerHTML = '';
  // 遍历每个生成的联系信息块
  $(".contactIp").each(function() {
    // 读取当前块的姓、名
    const firstName = $(this).find(".fname").val().trim();
    const lastName = $(this).find(".lname").val().trim();
    // 读取当前块选择的联系方式类型
    const contactType = $(this).find("select").val();
    let contactInfo = '';
    if (contactType === 'workmail') {
      const email = $(this).find(".two input").val().trim();
      contactInfo = ` Email: "${email}"`;
    } else if (contactType === 'workphone') {
      const phone = $(this).find(".three input").val().trim();
      contactInfo = ` Phone: "${phone}"`;
    }
    // 拼接输出内容
    if (firstName && lastName) {
      document.getElementById("contact").innerHTML += `Name: ${firstName} ${lastName}${contactInfo}<br>`;
    }
  })
}