本文将帮你在下单前添加你自己的验证，也就是添加新的字段，然后验证这个字段。
因为我们不添加字段，所以我们会验证一个已经存在的字段——邮件字段。我们只允许使用 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>