Question

我想在woocommerce的结帐页面中为自己的电话号码添加自定义验证功能。我该怎么办？

Answer 1

在我看来，没有必要覆盖默认的Woocommerce字段，也不需要使用Javascript验证。
您可以添加自定义验证，该验证将添加到Woocommerce的默认结算电话字段验证中，并挂钩到提交结帐后触发的操作。

这是我刚为客户实施的代码。

<button onclick="showanimation()">Show animation</button>

<div id="animation_counter2"><div class='wrapper'><div class='counter col_fourth'><h2 class='timer count-title count-number' data-to='50000' data-speed='3000'></h2><p class='count-text '>Data Sources</p></div></div></div>

<div id="animation_counter"></div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

当然，我可以检查其他任何内容，并根据您的需要调整条件代码，而不是我的// Custom validation for Billing Phone checkout field add_action('woocommerce_checkout_process', 'custom_validate_billing_phone'); function custom_validate_billing_phone() { $is_correct = preg_match('/^[0-9]{6,20}$/', $_POST['billing_phone']); if ( $_POST['billing_phone'] && !$is_correct) { wc_add_notice( __( 'The Phone field should be <strong>between 6 and 20 digits</strong>.' ), 'error' ); } }。

当然，您还可以在正确设置它们之后，通过选中正确的preg_match变量或您自己的自定义结帐字段为其他默认字段添加自定义验证，但这是另一个主题:)

希望这有帮助。

Answer 2

默认情况下，woocommerce已经有正则表达式验证。最简单的方法是通过jquery验证它。

编辑：尽量不要对woocommerce核心进行任何更改，因为它们将在下次更新时被覆盖。试试这段代码

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
     $fields['shipping']['shipping_phone'] = array(
        'label'     => __('Phone', 'woocommerce'),
    'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    'required'  => true,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     return $fields;
}

在woocommerce结帐页面验证电话号码

2 个答案: