magento2结算页面添加js验证

2年前

阅读本文预计花费：2 分钟

作者：晓风拂月

7天成为Magento系统架构师，现在开始学习Magento全栈开发！

《Magento2.X企业级开发实战》

magento2结算页面添加js验证

本小节介绍如何在checkout结账期间下订单之前添加要执行的自定义验证。即，在购物者单击PlaceOrder按钮后执行的验证。本小节不包括编写验证逻辑本身。

要在下单操作之前添加自定义验证，必须执行以下操作：

创建验证器。
将验证器添加到验证器池。
在checkout layout中声明验证。

第 1 步：创建验证器
为了兼容性、可升级性和易于维护，请不要编辑默认的Magento代码，而是在单独的模块中添加自定义项。要正确应用签出自定义，自定义模块应依赖于Magento_Checkout模块。不要将Ui用于自定义模块名称，因为指定路径时需要%Vendor%\u Ui符号，这可能会导致问题。

在自定义模块目录中，创建一个实现验证器的.js文件。它应该位于<your_module_dir>/view/frontend/web/js/model目录下。

下面是validator.js文件的示例，它必须实现 validate() 方法：

define(
    ['mage/translate', 'Magento_Ui/js/model/messageList'],
    function ($t, messageList) {
        'use strict';
        return {
            validate: function () {
                const isValid = false; //Put your validation logic here

                if (!isValid) {
                    messageList.addErrorMessage({ message: $t('a possible failure message ...  ') });
                }

                return isValid;
            }
        }
    }
);

第 2 步：将验证器添加到验证器池
自定义验证器必须添加到“附加验证器”池中。为此，在 <your_module_dir>/view/frontend/web/js/view 目录中创建一个新的 <your-validation>.js文件，其内容如下：

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        '<your_module>/js/model/your-validator'
    ],
    function (Component, additionalValidators, yourValidator) {
        'use strict';
        additionalValidators.registerValidator(yourValidator);
        return Component.extend({});
    }
);

第 3 步：在checkout布局文件中声明验证
在自定义模块目录中，创建一个新的<your_module_dir>/view/frontend/layout/checkout_index_index.xml文件。

在此文件中，添加以下内容：

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="billing-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="payment" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="additional-payment-validators" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <!-- Declare your validation. START -->
                                                        <item name="your-validator" xsi:type="array">
                                                            <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
                                                        </item>
                                                        <!-- Declare your validation. END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>
    </body>
</page>

最后，清除缓存：

php bin/magento s:up
chmod -R 777 /var/www/html/magento

如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

《Magento2.X企业级开发实战》

magento2结算页面添加js验证

相关文章