由于我们没有添加任何新字段，因此我们将验证现有字段，即电子邮件字段。
我们将只允许使用来自Google（gmail）的客户电子邮件的订单进行处理。
在处理订单之前添加自定义验证。
- 第1步：创建验证器。
- 步骤2：将验证器添加到验证器池。
- 第3步：在结帐布局中声明验证。
- 步骤4：测试新的验证器。
您应该知道如何创建基本的Magento 2模块。所有自定义文件都将在此模块内。
让我们开始。
步骤1：创建验证器。
isGmail.js在Mageplaza/HelloWorld/view/frontend/web/js/model目录中创建。
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;
}
};
}
);
步骤2：将验证器添加到验证器池。
isGmail.js在Mageplaza/HelloWorld/view/frontend/web/js/view目录中创建。
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({});
}
);
步骤3：在结帐布局中声明验证。
将以下代码添加到 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>
步骤4：测试新的验证器。
现在该刷新缓存并尝试使用其他电子邮件进行结帐了。如果您有任何问题，请随时在下面发表评论