如何在WordPress联系页面集成Postgrid地址校验工具实现地址验证

第一步：获取Postgrid API密钥 #

注册Postgrid账号，登录后在后台的账号设置或开发者板块找到API密钥，保存好这个密钥，后续调用验证接口会用到。

分两种情况处理（根据你的联系表单类型） #

情况一：用Contact Form 7搭建的联系表单 #

1. 配置表单字段
   编辑你的Contact Form 7表单，添加带ID的地址相关字段，方便后续JS取值：

   [text* street id:street placeholder "街道地址"]
   [text* city id:city placeholder "城市"]
   [text* state id:state placeholder "州/省份"]
   [text* zipcode id:zipcode placeholder "邮编"]
   [submit "提交"]
   

2. 添加验证脚本
   打开主题的functions.php文件（或用「自定义代码」插件），添加以下代码引入脚本并传递API密钥：

   function postgrid_address_validation_script() {
       wp_enqueue_script( 'postgrid-validation', get_template_directory_uri() . '/js/postgrid-validation.js', array('jquery'), '1.0', true );
       wp_localize_script( 'postgrid-validation', 'postgrid_vars', array(
           'api_key' => '你的Postgrid API密钥',
           'api_url' => 'https://api.postgrid.com/v1/addresses/verify'
       ) );
   }
   add_action( 'wp_enqueue_scripts', 'postgrid_address_validation_script' );
   

3. 编写JS验证逻辑
   在主题目录下创建js/postgrid-validation.js文件，写入以下代码实现提交前校验：

   jQuery(document).ready(function($) {
       $('form.wpcf7-form').submit(function(e) {
           e.preventDefault();
           var form = $(this);
           // 收集地址字段值
           var addressData = {
               street: $('#street').val(),
               city: $('#city').val(),
               region: $('#state').val(),
               postalCode: $('#zipcode').val(),
               country: 'US' // 根据需求修改国家代码，比如CN代表中国
           };
   
           // 调用Postgrid验证接口
           $.ajax({
               url: postgrid_vars.api_url,
               method: 'POST',
               headers: {
                   'x-api-key': postgrid_vars.api_key
               },
               data: JSON.stringify(addressData),
               contentType: 'application/json',
               success: function(response) {
                   if (response.status === 'valid') {
                       // 地址有效，提交表单
                       form.unbind('submit').submit();
                   } else {
                       // 地址无效，提示用户
                       alert('地址验证失败：' + response.message);
                   }
               },
               error: function() {
                   alert('地址验证请求出错，请稍后重试');
               }
           });
       });
   });
   

情况二：自定义HTML联系表单 #

1. 确保表单字段带ID
   给自定义表单的地址字段添加ID，示例如下：

   <form id="contact-form" method="post" action="/submit-contact">
       <input type="text" id="street" name="street" required placeholder="街道地址">
       <input type="text" id="city" name="city" required placeholder="城市">
       <input type="text" id="state" name="state" required placeholder="州/省份">
       <input type="text" id="zipcode" name="zipcode" required placeholder="邮编">
       <button type="submit">提交</button>
   </form>
   

2. 添加验证脚本
   同样用functions.php引入脚本（代码和情况一的PHP部分一致），然后修改JS代码的表单选择器：

   jQuery(document).ready(function($) {
       $('#contact-form').submit(function(e) {
           e.preventDefault();
           var form = $(this);
           var addressData = {
               street: $('#street').val(),
               city: $('#city').val(),
               region: $('#state').val(),
               postalCode: $('#zipcode').val(),
               country: 'US' // 修改为对应国家代码
           };
   
           $.ajax({
               url: postgrid_vars.api_url,
               method: 'POST',
               headers: {
                   'x-api-key': postgrid_vars.api_key
               },
               data: JSON.stringify(addressData),
               contentType: 'application/json',
               success: function(response) {
                   if (response.status === 'valid') {
                       form.unbind('submit').submit();
                   } else {
                       alert('地址验证失败：' + response.message);
                   }
               },
               error: function() {
                   alert('地址验证请求出错，请稍后重试');
               }
           });
       });
   });
   

注意事项 #

• 替换代码中的你的Postgrid API密钥为实际获取的密钥
• 可以把alert提示改成页面内的友好提示（比如在表单上方插入错误信息元素）
• 测试时优先使用Postgrid的测试API密钥，避免消耗正式额度

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