# 在下单之前添加验证

**URL:** https://forum.magentochina.org/t/%E5%9C%A8%E4%B8%8B%E5%8D%95%E4%B9%8B%E5%89%8D%E6%B7%BB%E5%8A%A0%E9%AA%8C%E8%AF%81/727
**Category:** Magento 2.X
**Tags:** 教程, magento2, 开发
**Created:** [2020 年6 月 15 日 12:11 UTC](https://forum.magentochina.org/t/%E5%9C%A8%E4%B8%8B%E5%8D%95%E4%B9%8B%E5%89%8D%E6%B7%BB%E5%8A%A0%E9%AA%8C%E8%AF%81/727 "2020-06-15T12:11:00Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### 作者： ![Vicky](https://forum.magentochina.org/letter_avatar_proxy/v4/letter/v/b19c9b/32.png) [@Vicky](https://forum.magentochina.org/u/Vicky)
#### 发布日期： [2020 年6 月 15 日 12:11 UTC](https://forum.magentochina.org/t/%E5%9C%A8%E4%B8%8B%E5%8D%95%E4%B9%8B%E5%89%8D%E6%B7%BB%E5%8A%A0%E9%AA%8C%E8%AF%81/727/1 "2020-06-15T12:11:00Z")

</div>

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

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

### 在下单前添加自定义校验

- 第一步：创建校验器；

- 第二步：把校验器添加到校验池；

- 第三步：在下单布局文件中声明这个校验器；

- 第四步：测试。

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

### 第一步，创建校验器

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

```auto
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

```auto
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

```auto
<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模块开发系列，其他内容请点击下面链接:

> [@Magento2模块开发中文教程索引](https://forum.magentochina.org/t/magento2%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E4%B8%AD%E6%96%87%E6%95%99%E7%A8%8B%E7%B4%A2%E5%BC%95/36):
>
> 本文翻译自mageplaza的Magento2模块开发教程,而且正在翻译中. 翻译也是非常好的学习方式，希望下列表中还有我们没有翻译，而你又想分享的内容,请发表文章之后，在下面附上地址。 如果觉得本站翻译得内容对您有帮助，又没有时间帮助翻译回馈社区.请打赏我们，您的支持是我们的动力: 转载说明:非常欢迎转载，但是必须保证文章的完整性并附上原文地址和翻译原文的地址，保证阅读者不会产生歧义. 目录索引: 索 引 中 文 原 文 1 [Magento2如何创建模块](https://forum.magentochina.org/t/Magento-2%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%95%99%E7%A8%8B/38)[How to Create Module in Magento 2](https://www.mageplaza.com/kb/how-create-hello-world-module-magento-2.html) 2 [控制器详解](https://forum.magentochina.org/t/Magento-2%E6%8E%A7%E5%88%B6%E5%99%A8%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/39)[Create Controllers](https://www.mageplaza.com/magento-2-module-development/how-to-create-controllers-magento-2.html) 3 [CRUD 模型](https://forum.magentochina.org/t/Magento2-CRUD%E6%A8%A1%E5%9E%8B%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88%E5%B7%A5%E5%8E%82%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/43)[CRUD Models](https://www.mageplaza.com/magento-2-module-development/how-to-create-crud-model-magento-2.html) 4 [视图层:块,布局和模板](https://forum.magentochina.org/t/%E8%A7%86%E5%9B%BE%E5%B1%82%E5%9D%97%E5%B8%83%E5%B1%80%E5%92%8C%E6%A8%A1%E6%9D%BF%E6%A8%A1%E6%9D%BF%E6%95%99%E7%A8%8B/50/1)[View: Block, Layouts and templates](https://www.mageplaza.com/magento-2-module-development/view-block-layout-template-magento-2.html) 5 [配置system.xml](https://forum.magentochina.org/t/%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6systemxml/55)[Configuration - System.xm…](https://www.mageplaza.com/magento-2-module-development/create-system-xml-configuration-magento-2.html)