Question

我必须从用户通过网站获取交付详细信息（这是针对服务提供网站）。该片段附在下方。如何验证输入是否是正确的位置？在这里，我使用谷歌地图提示客户的位置，但他/她也可以自己添加。这可能是一个麻烦，当他们添加错误的条目。有什么方法可以克服这个？任何关于正确路径的指南都会有帮助吗？

var inputPick = document.getElementById('pickupID');

var optionsPick = {
  componentRestrictions: {
    country: 'aus'
  }
};

new google.maps.places.Autocomplete(inputPick, optionsPick);


var inputDes = document.getElementById('destinationID');

var optionsDes = {
  componentRestrictions: {
    country: 'aus'
  }
};

new google.maps.places.Autocomplete(inputDes, optionsDes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<div class="form-group">
  <label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Pick up address:</label>
  <div class="col-sm-8">
    <input id="PickUnitNo" name="PickUnitNo" type="text" class="form-control" placeholder="Enter Unit Number (Optional)">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-4"></div>
  <div class="col-sm-8">
    <input type="text" class="form-control" name="pickupID" id="pickupID" placeholder="Enter Pickup Address" required>
  </div>
</div>
<hr>
<!--Destination address-->
<div class="form-group">
  <label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Destination address:</label>
  <div class="col-sm-8">
    <input id="DestUnitNo" name="DestUnitNo" type="text" class="form-control" placeholder="Enter Unit Number (Optional)">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-4"></div>
  <div class="col-sm-8">
    <input type="text" class="form-control" name="destinationID" id="destinationID" placeholder="Enter Destination Address" required>
  </div>
</div>

Answer 1

交付地址验证通常通过在结账过程中针对保持此信息更新的第三方API验证邮政编码/邮政编码（+号码）来完成。另一个选项可能是找到所有Zipcodes并将它们存储在您自己的数据库中，然后使用该信息进行验证。

在您的情况下，您需要确保手动输入的送货地址已经过验证。

您可以在此处找到使用与您类似的Google API的示例实现：https://gist.github.com/gabesumner/1801479

如何验证目的地

1 个答案: