JavaScript如何判断表单生成的地址对象是否存在于对象数组中

问题原因 #

1. 你把从表单读取到的地址对象用JSON.stringify()转成了字符串，但是预存的eligiblePCVoucher数组里的元素都是对象类型，两者类型不一致，includes()自然无法匹配到结果。
2. 就算你不转字符串直接比对对象也没用：JS中对象是引用类型，includes()判断对象相等时比对的是内存引用地址，而非对象内部的属性值，就算两个对象所有属性和值完全一致，只要不是同一个引用就会返回false。

解决方案 #

保留表单地址的对象格式，写字段比对逻辑遍历预存地址数组，逐个校验所有字段是否完全一致即可。

修改后可运行代码 #

JS部分

var eligiblePCVoucher = [{
    "postcode": "AA90 4XX",
    "company": "",
    "address1": "1 Seaview Road",
    "address2": "Smalltown-on-Sea",
    "town": "Smalltown",
    "county": "Norfolk"
  },
  {
    "postcode": "AA90 4XX",
    "company": "",
    "address1": "2 Seaview Road",
    "address2": "Smalltown-on-Sea",
    "town": "Smalltown",
    "county": "Norfolk"
  },
  {
    "postcode": "AA90 4XX",
    "company": "",
    "address1": "2 Seaview Road",
    "address2": "Smalltown-on-Sea",
    "town": "Smalltown",
    "county": "Norfolk"
  },
  {
    "postcode": "AA90 4XX",
    "company": "",
    "address1": "Seashore",
    "address2": "Seaview Road",
    "town": "Smalltown",
    "county": "Norfolk"
  },
  {
    "postcode": "AA90 4XX",
    "company": "",
    "address1": "Bayview",
    "address2": "Seaview Road",
    "town": "Smalltown",
    "county": "Norfolk"
  }
]
/* POSTCODE LOOKUP */
document.getElementById("dropdown").addEventListener('change', function() {
  var pc_result = document.getElementsByClassName("pc_row");
  var i;
  for (i = 0; i < pc_result.length; i++) {
    pc_result[i].style.display = 'table';
  }
})

/* 匹配函数：校验两个地址对象所有字段完全相等 */
function isAddressMatch(formAddress, preStoreAddress) {
  return formAddress.postcode === preStoreAddress.postcode
    && formAddress.company === preStoreAddress.company
    && formAddress.address1 === preStoreAddress.address1
    && formAddress.address2 === preStoreAddress.address2
    && formAddress.town === preStoreAddress.town
    && formAddress.county === preStoreAddress.county
}

/* MY FUNCTION */
document.getElementById('submit_eligible').addEventListener('click', function(e) {
  // 阻止表单默认提交跳转
  e.preventDefault()
  var postCode = document.getElementById('postcode').value;
  var addressOne = document.getElementById('address1').value;
  var addressTwo = document.getElementById('address2').value;
  var town = document.getElementById('town').value;
  var county = document.getElementById('county').value;
  var fullAddress = addressOne + " " + addressTwo + " " + postCode;

  let form = document.querySelector('#post');
  let data = new FormData(form);
  var formAddress = {};
  data.forEach(function(value, key) {
    formAddress[key] = value.trim(); // 去掉首尾空格，避免用户输入多余空格导致匹配失败
  });
  
  // 遍历预存数组找匹配项
  const isEligible = eligiblePCVoucher.some(preAddr => isAddressMatch(formAddress, preAddr))
  
  console.log('表单地址：', formAddress);
  console.log('是否符合条件：', isEligible);
  
  if(isEligible) {
    // 匹配成功后的后续逻辑写在这里
    alert('地址匹配成功，可继续流程')
  } else {
    alert('该地址不在 eligible 范围内')
  }
})

HTML部分（移除原代码多余的</td>标签避免布局异常）

<form id="post">
  <label for="postcode">Postcode</label>
  <input type="text" value="" id="postcode" name="postcode" />
  <input type="submit" value="lookup" id="lookup" onclick="SearchBegin();return false;" />
  <select id="dropdown" style='display:none;' onchange="SearchIdBegin()">
    <option>Select an address:</option>
  </select>
  <label for="company">Company</label>
  <input type="text" value="" id="company" name="company" />
  <label for="address1">Address 1</label>
  <input type="text" value="" id="address1" name="address1" />
  <label for="address2">Address 2</label>
  <input type="text" value="" id="address2" name="address2" />
  <label for="town">Town</label>
  <input type="text" value="" id="town" name="town" />
  <label for="county">County</label>
  <input type="text" value="" id="county" name="county" />

  <input type="submit" value="Am I eligible?" id="submit_eligible" />
</form>

优化说明 #

• 对用户输入的字段值做了trim()处理，避免首尾多余空格导致匹配失败
• 用Array.some()方法遍历数组，只要找到一个匹配项就会返回true，性能优于全量遍历
• 阻止了表单的默认提交行为，避免点击按钮页面跳转

内容的提问来源于stack exchange，提问作者NewMike