Magento 2结账页面：仅在提交时应用自定义字段验证规则

方案(a)：字段失去焦点后触发验证（首选） #

方法1：通过XML配置修改验证事件 #

在你的checkout_index_index.xml中，针对街道字段的第一个输入框，添加validation_event配置，指定验证在失去焦点时触发：

<item name="children" xsi:type="array">
    <item name="street" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="0" xsi:type="array">
                <item name="validation" xsi:type="array">
                    <item name="validate-housenumber" xsi:type="string">true</item>
                </item>
                <!-- 指定验证触发事件为blur（失去焦点） -->
                <item name="validation_event" xsi:type="string">blur</item>
            </item>
        </item>
    </item>
</item>

配置完成后清除缓存：bin/magento cache:clean

方法2：自定义JS组件覆盖字段行为 #

如果XML配置不生效，可通过自定义JS组件调整验证触发逻辑：

1. 创建自定义JS文件 app/design/frontend/[你的主题]/[你的主题]/web/js/view/checkout/address/field/street.js：

define([
    'Magento_Ui/js/form/element/abstract'
], function (Abstract) {
    'use strict';

    return Abstract.extend({
        setValidationConfig: function () {
            // 覆盖验证事件为blur
            this.validation = _.extend({}, this.validation, {
                validationEvent: 'blur'
            });
            return this._super();
        }
    });
});

2. 在checkout_index_index.xml中替换街道字段的组件：

<item name="children" xsi:type="array">
    <item name="street" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="0" xsi:type="array">
                <item name="component" xsi:type="string">[你的主题]_checkout/js/view/checkout/address/field/street</item>
                <item name="validation" xsi:type="array">
                    <item name="validate-housenumber" xsi:type="string">true</item>
                </item>
            </item>
        </item>
    </item>
</item>

3. 部署静态资源：bin/magento setup:static-content:deploy -f，再清除缓存。

方案(b)：点击结账下一步按钮时触发验证 #

方法1：修改验证规则添加实时验证禁用属性 #

如果你直接修改了核心rules.js，给自定义规则添加stopLiveValidation: true，让它只在表单提交时触发：

'validate-housenumber': [
        function (value) {
            return utils.isEmptyNoTrim(value) || /^[A-Za-z]+[ ]+[0-9]/.test(value);
        },
        $.mage.__('Please enter a house number'),
        // 禁用实时验证，仅在提交时检查
        'stopLiveValidation: true'
    ],

方法2：通过自定义模块扩展验证规则（推荐，不修改核心文件） #

1. 创建自定义模块[你的厂商]/[你的模块]，在view/base/web/js/validation/rules.js中添加规则：

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

    $.validator.addMethod(
        'validate-housenumber',
        function (value) {
            return $.mage.isEmptyNoTrim(value) || /^[A-Za-z]+[ ]+[0-9]/.test(value);
        },
        $.mage.__('Please enter a house number'),
        // 禁用实时验证
        'stopLiveValidation: true'
    );

    return $;
});

2. 在模块的requirejs-config.js中配置mixins：

var config = {
    config: {
        mixins: {
            'mage/validation': {
                '[你的厂商]_[你的模块]/js/validation/rules': true
            }
        }
    }
};

3. 启用模块：bin/magento module:enable [你的厂商]_[你的模块]，执行编译、静态资源部署和缓存清理。

内容的提问来源于stack exchange，提问作者ralex