如何实现Magento 2结账页面电话字段仅允许输入数字？

默认情况下，Magento 2的结账电话字段允许输入任意字符：

以下是几种实现仅允许输入数字的方案，兼顾前端实时限制和后端验证：

方案一：前端实时输入限制+浏览器原生提示 #

1. 添加JS监听过滤非数字字符 #

在主题的requirejs-config.js中配置自定义脚本（若没有则创建）：

var config = {
    map: {
        '*': {
            restrictTelephone: 'js/restrict-telephone'
        }
    }
};

然后在主题的web/js/restrict-telephone.js中编写逻辑：

define(['jquery'], function($) {
    'use strict';

    return function() {
        $(document).on('input keydown paste', '#telephone', function() {
            $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });
    };
});

最后在主题的checkout_index_index.xml布局中引入该脚本：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <block type="Magento\Framework\View\Element\Template" name="restrict.telephone" template="Vendor_Theme::js/restrict-telephone.phtml" />
        </referenceContainer>
    </body>
</page>

对应的restrict-telephone.phtml内容：

<script type="text/javascript">
    require(['restrictTelephone'], function(restrictTelephone) {
        restrictTelephone();
    });
</script>

2. 增强字段属性（可选） #

复制Magento默认的电话字段模板vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form/element/telephone.html到主题对应路径，修改input标签添加inputmode="numeric"和pattern="[0-9]*"属性，让浏览器原生提示仅输入数字：

<input class="input-text" type="tel"
       data-bind="
        value: value,
        valueUpdate: 'keyup',
        hasFocus: focused,
        attr: {
            name: inputName,
            placeholder: placeholder,
            id: uid,
            disabled: disabled,
            'aria-describedby': getDescriptionId(),
            'aria-required': required,
            'aria-invalid': error() ? true : 'false',
            'inputmode': 'numeric',
            'pattern': '[0-9]*'
        }"
/>

方案二：Magento表单验证规则 #

通过布局文件为电话字段添加内置的digits验证规则，提交时自动校验：
在主题的checkout_index_index.xml中添加：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="digits" xsi:type="boolean">true</item>
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

配置后，用户提交非数字内容时，结账页面会弹出验证提示。

方案三：后端验证（防止绕过前端） #

创建自定义模块，添加后端验证确保提交的电话为纯数字：

1. 模块配置文件etc/module.xml #

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_RestrictTelephone" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. 注册文件registration.php #

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_RestrictTelephone', __DIR__);

3. 插件配置etc/frontend/di.xml #

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="validate_telephone_numeric" type="Vendor\RestrictTelephone\Plugin\ValidateTelephone" sortOrder="10"/>
    </type>
</config>

4. 验证插件类Plugin/ValidateTelephone.php #

<?php
namespace Vendor\RestrictTelephone\Plugin;

use Magento\Checkout\Model\ShippingInformationManagement;
use Magento\Framework\Exception\LocalizedException;

class ValidateTelephone
{
    public function beforeSaveAddressInformation(
        ShippingInformationManagement $subject,
        $cartId,
        \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
    ) {
        $telephone = $addressInformation->getShippingAddress()->getTelephone();
        if ($telephone && !preg_match('/^[0-9]+$/', $telephone)) {
            throw new LocalizedException(__('电话字段仅允许输入数字，请重新输入。'));
        }
        return [$cartId, $addressInformation];
    }
}

执行模块启用命令：

bin/magento module:enable Vendor_RestrictTelephone
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

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