在下单之前添加验证

本文将帮你在下单前添加你自己的验证,也就是添加新的字段,然后验证这个字段。

因为我们不添加字段,所以我们会验证一个已经存在的字段——邮件字段。我们只允许使用 Gmail 邮箱的订单通过。

在下单前添加自定义校验

  • 第一步:创建校验器;

  • 第二步:把校验器添加到校验池;

  • 第三步:在下单布局文件中声明这个校验器;

  • 第四步:测试。

你应该知道如何创建 Magento 2 模块。所有自定义的文件都应该在这个模块中。

第一步,创建校验器

在 Mageplaza/HelloWorld/view/frontend/web/js/model 目录下创建 isGmail.js。必须有方法 validate 。

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

        return {

            /**
             * Validate checkout agreements
             *
             * @returns {Boolean}
             */
            validate: function () {
                var emailValidationResult = false;
                var email = $('form[data-role=email-with-possible-login]').val();
                if(~email.search("gmail.com")){ //should use Regular expression in real store.
                    emailValidationResult = true;
                }
                return emailValidationResult;
            }
        };
    }
);

第二步:把校验器添加到校验器池中

在 Mageplaza/HelloWorld/view/frontend/web/js/view 目录下创建 isGmail.js

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        'Mageplaza_HelloWorld/js/model/isGmail'
    ],
    function (Component, additionalValidators, gmailValidation) {
        'use strict';
        additionalValidators.registerValidator(gmailValidation);
        return Component.extend({});
    }
);

第三步:在下单的布局中声明这个校验

把下面的代码添加到 Mageplaza/HelloWorld/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="gmailValidation" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Mageplaza_HelloWorld/js/view/isGmail</item>
                                                                    </item>
                                                                    <!-- Declare your validation. END -->
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

本教程翻译自Mageplaza模块开发系列,其他内容请点击下面链接: