如何获取input输入值并与localStorage数据比对避免邮箱重复

需求描述 #

• 获取输入框中用户填写的邮箱值
• 与localStorage中存储的已有邮箱数据比对，确保提交的邮箱不重复

container[i].input_email /* 该值从localStorage中读取 */

原始参考代码 #

function validEmail() {
  for (var i = 0; i < container.length; i++) {
    console.log(container[i].input_email);   
    if(container[i].input_email==input_email.value){
      var element = document.getElementById("warnig");
      element.innerHTML = 'email exiest';
    }
  }
}

优化后可用代码 #

原始代码存在拼写错误、校验逻辑不完整、缺少localStorage读取逻辑等问题，优化后的完整实现如下：

// 从localStorage读取已存储的邮箱列表，注意替换成你实际存储对应的key
function getSavedEmailList() {
  const savedData = localStorage.getItem('email_list');
  // 无存储数据时返回空数组避免报错
  return savedData ? JSON.parse(savedData) : [];
}

function validEmail() {
  const emailContainer = getSavedEmailList();
  // 读取用户输入的邮箱，去除首尾空格后转小写（邮箱不区分大小写）
  const inputVal = document.getElementById('input_email').value.trim().toLowerCase();
  const warningEle = document.getElementById('warning');
  let hasDuplicate = false;

  for (let i = 0; i < emailContainer.length; i++) {
    const savedEmail = emailContainer[i].input_email.toLowerCase();
    if (savedEmail === inputVal) {
      hasDuplicate = true;
      break; // 匹配到重复邮箱直接终止遍历，减少无效计算
    }
  }

  if (hasDuplicate) {
    warningEle.innerText = '该邮箱已存在，请更换后重试';
    return false; // 校验不通过，返回false可用于阻止表单提交
  } else {
    warningEle.innerText = '';
    return true; // 校验通过，可继续后续提交逻辑
  }
}

使用注意事项 #

• 请确保页面上邮箱输入框的id为input_email，提示元素的id为warning，和代码中对应
• 调用校验方法时如果返回false，说明存在重复邮箱，需要拦截提交操作
• 存储邮箱到localStorage时，请保证存储结构和读取逻辑匹配，存储的数组项包含input_email字段

内容的提问来源于stack exchange，提问作者Omar Abd El-Latif