WooCommerce邮编校验逻辑自定义及钩子调用方法咨询

一、$fields 和 $errors 变量调试方法 #

方式1：写入WooCommerce日志（生产/测试环境通用） #

在你的validate_postcode函数中加入以下代码，即可将变量内容写入WooCommerce日志：

$logger = wc_get_logger();
// 打印fields内容
$logger->debug( '校验字段数据：' . print_r( $fields, true ), [ 'source' => 'postcode_validation_debug' ] );
// 打印errors内容
$logger->debug( '错误对象数据：' . print_r( $errors, true ), [ 'source' => 'postcode_validation_debug' ] );

日志查看路径：后台左侧菜单 WooCommerce > 状态 > 日志，下拉选择postcode_validation_debug源即可查看对应日志。

方式2：直接输出打印（本地开发环境用） #

如果是本地开发环境，可以直接打印内容后终止请求，提交结账表单时就能直接看到变量内容：

echo '<pre style="padding:20px;background:#fff;">';
print_r( 'Fields 内容：' );
print_r( $fields );
echo '<hr>';
print_r( 'Errors 内容：' );
print_r( $errors );
echo '</pre>';
wp_die();

调试完成后删除这段代码即可。 #

二、邮编校验需求实现方案 #

方案1：后端校验（基于你已选的woocommerce_after_checkout_validation钩子） #

无需手动修改字段类名，WooCommerce默认支持根据错误标记自动渲染红框和提示，完整实现代码如下：

add_action( 'woocommerce_after_checkout_validation', 'custom_validate_postcode', 10, 2);
function custom_validate_postcode( $fields, $errors ){
    // 获取提交的国家和邮编，校验收货地址邮编替换为shipping_country、shipping_postcode即可
    $country = $fields['billing_country'];
    $postcode = $fields['billing_postcode'];
    // 调用WooCommerce原生完善的邮编校验逻辑
    $postcode_is_valid = WC_Validation::is_postcode( $postcode, $country );
    if ( !$postcode_is_valid ) {
        // 第一个参数传入对应字段名，WooCommerce会自动给该字段加红框、在字段下方展示错误提示
        $errors->add( 'billing_postcode', '请输入符合当前国家格式要求的有效邮编' );
    }
}

方案2：前端实时校验（优化用户体验，无需提交表单即可提示） #

如果希望用户输入邮编时就实时提示校验结果，可以额外加前端逻辑：

1. 前端新增JS监听逻辑（加入到主题自定义JS文件或结账页自定义脚本中）

jQuery(function($){
    // 监听国家切换、邮编输入事件
    $(document).on('change input', '#billing_country, #billing_postcode, #shipping_country, #shipping_postcode', function(){
        const $postcodeField = $(this).closest('.woocommerce-billing-fields').length ? $('#billing_postcode') : $('#shipping_postcode');
        const country = $(this).closest('.woocommerce-billing-fields').length ? $('#billing_country').val() : $('#shipping_country').val();
        const postcode = $postcodeField.val().trim();
        if (!postcode) return;
        // 调用AJAX请求后端校验
        $.ajax({
            url: wc_checkout_params.ajax_url,
            type: 'POST',
            data: {
                action: 'front_check_postcode',
                country: country,
                postcode: postcode
            },
            success: res => {
                $postcodeField.parent().find('.custom-postcode-error').remove();
                if (res.data.valid) {
                    $postcodeField.removeClass('woocommerce-invalid').addClass('woocommerce-validated');
                } else {
                    $postcodeField.removeClass('woocommerce-validated').addClass('woocommerce-invalid');
                    $postcodeField.after('<div class="woocommerce-error custom-postcode-error" style="margin-top:5px;">请输入有效邮编</div>');
                }
            }
        })
    })
})

2. 后端新增AJAX校验接口（加入到主题functions.php中）

add_action('wp_ajax_front_check_postcode', 'front_check_postcode');
add_action('wp_ajax_nopriv_front_check_postcode', 'front_check_postcode');
function front_check_postcode() {
    $country = sanitize_text_field($_POST['country']);
    $postcode = sanitize_text_field($_POST['postcode']);
    $is_valid = WC_Validation::is_postcode($postcode, $country);
    wp_send_json_success(['valid' => $is_valid]);
}

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