Regel zu rules.js Magento2 hinzufügen

Wie füge ich neue Regeln zu rules.js hinzu? Ich habe extra-rules.js erstellt

define(
[
    'jquery',
    'Magento_Ui/js/lib/validation/validator'
], function ($, validator) {
    "use strict";
    return validator.addRule('phoneNO',
        function (value) {
            return value.length > 9 && value.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/);
        },
        $.mage.__('Please specify a valid phone number')
    );
});

Wie füge ich diese Regel zu rules.js zusammen?

Hier ist ein vollständiges und realistisches Beispiel zum Hinzufügen einer benutzerdefinierten Regel zum Auschecken des Eingabefelds zum Überprüfen des Mindestalters:

Erstellen Sie in Ihrem Modul eine requirejs-config.js, um dem validatorObjekt eine Mischung Namespace/Modulename/view/frontend/requirejs-config.jsmit folgendem Inhalt hinzuzufügen :

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/validation/validator': {
                'Namespace_Modulename/js/validator-mixin': true
            }
        }
    }
};

Erstellen Sie ein js-Skript in Ihrem Modulordner Namespace/Modulename/view/frontend/web/js/validator-mixin.jsmit folgendem Inhalt:

define([
    'jquery',
    'moment'
], function ($, moment) {
    'use strict';

    return function (validator) {

        validator.addRule(
            'validate-minimum-age',
            function (value, params, additionalParams) {
                return $.mage.isEmptyNoTrim(value) || moment(value, additionalParams.dateFormat).isBefore(moment().subtract(params.minimum_age, 'y'));
            },
            $.mage.__("Sorry, you don't have the age to purchase the current articles.")
        );

        return validator;
    };
});

VERWENDUNGSZWECK

Wenn Sie ein Magento PHP-Plugin verwenden möchten, um ein Eingabefeld in Ihre Versandadresse für die Kasse einzufügen und den Inhalt dieses Felds mit der zuvor hinzugefügten benutzerdefinierten Regel zu überprüfen, finden Sie hier einen Beispielcode:

Erstellen Sie eine di.xmlDatei etc/frontendmit folgendem Inhalt im Ordner Ihres Moduls:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
        <plugin name="CheckoutLayoutProcessor" type="Namespace\Modulename\Plugin\Block\Checkout\LayoutProcessor" />
    </type>
</config>

Erstellen Sie dann die LayoutProcessor.phpDatei app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.phpmit dem folgenden Inhalt, und aktualisieren Sie sie für Ihre Anforderungen:

<?php
/**
 * diglin GmbH - Switzerland
 *
 * @author      Sylvain Rayé <support **at** diglin.com>
 * @category    diglin
 * @package     diglin
 * @copyright   Copyright (c) diglin (http://www.diglin.com)
 */

namespace MyNamespace\Modulename\Plugin\Block\Checkout;

use MyNamespace\Modulename\Helper\AgeValidation;

/**
 * Class LayoutProcessor
 * @package MyNamespace\Modulename\Plugin\Block\Checkout
 */
class LayoutProcessor
{
    /**
     * @var \MyNamespace\Checkout\Helper\AgeValidation
     */
    private $ageValidation;
    /**
     * @var \Magento\Framework\Stdlib\DateTime\TimezoneInterface
     */
    private $timezone;
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    private $scopeConfig;

    /**
     * LayoutProcessor constructor.
     *
     * @param \MyNamespace\Checkout\Helper\AgeValidation $ageValidation
     * @param \Magento\Framework\Stdlib\DateTime\TimezoneInterface $timezone
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        AgeValidation $ageValidation,
        \Magento\Framework\Stdlib\DateTime\TimezoneInterface $timezone,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    )
    {
        $this->ageValidation = $ageValidation;
        $this->timezone = $timezone;
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * Checkout LayoutProcessor after process plugin.
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $processor
     * @param array $jsLayout
     *
     * @return array
     */
    public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
    {
        $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
        ['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];

        // Checks if shipping step available.
        if (isset($shippingConfiguration)) {
            $shippingConfiguration = $this->processAddress(
                $shippingConfiguration
            );
        }

        return $jsLayout;
    }

    /**
     * Process provided address to contains checkbox and have trackable address fields.
     *
     * @param $addressFieldset - Address fieldset config.
     *
     * @return array
     */
    private function processAddress($addressFieldset)
    {
        $minimumAge = $this->ageValidation->getMinimumAge();
        if ($minimumAge === null) {
            unset($addressFieldset['my_dob']);
        } else {
            $addressFieldset['my_dob'] = array_merge(
                $addressFieldset['my_dob'],
                [
                    'component' => 'Magento_Ui/js/form/element/date',
                    'config' => array_merge(
                        $addressFieldset['my_dob']['config'],
                        [
                            'elementTmpl' => 'ui/form/element/date',
                            // options of datepicker - see http://api.jqueryui.com/datepicker/
                            'options' => [
                                'dateFormat' => $this->timezone->getDateFormatWithLongYear(),
                                'yearRange' => '-120y:c+nn',
                                'maxDate' => '-1d',
                                'changeMonth' => 'true',
                                'changeYear' => 'true',
                                'showOn' => 'both',
                                'firstDay' => $this->getFirstDay(),
                            ],
                        ]
                    ),
                    'validation' => array_merge($addressFieldset['my_dob']['validation'],
                        [
                            'required-entry' => true,
                            'validate-date' => true,
                            'validate-minimum-age' => $minimumAge, // custom value in year - array('minimum_age' => 16)
                        ]
                    ),
                ]
            );
        }

        return $addressFieldset;
    }

    /**
     * Return first day of the week
     *
     * @return int
     */
    public function getFirstDay()
    {
        return (int)$this->scopeConfig->getValue(
            'general/locale/firstday',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
    }
}

BEARBEITEN

Vielen Dank an @ alan-Storm für Ihre Erklärung hier https://alanstorm.com/the-curious-case-of-magento-2-mixins/ und @ jisse-reitsma bringen die Richtung

Plus Magento 2 doc http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

Das Original rules.jsgibt ein Objektliteral zurück, das alle Regeln enthält. Sie können dieses Objektliteral ändern, indem Sie dieser Datei ein Mixin hinzufügen. Die Magento-Dokumente enthalten einige Anleitungen dazu: Magento Javascript Mixins

Das gleiche Problem wurde hier beantwortet: Magento 2 fügt eine benutzerdefinierte Validierungsregel hinzu

Eine wirklich gute Quelle für das Verständnis dieses Systems ist hier: https://alanstorm.com/the-curious-case-of-magento-2-mixins/

Und nicht genau das, was Sie versuchen, aber eine sehr gute Quelle hier: https://www.youtube.com/watch?v=0fguDL5iEd0&t=540s

Es funktioniert für mich:

Erstellen Sie eine requirejs-config.js in Ihrem Modul, um dem Validator-Objekt eine Mischung mit dem folgenden Inhalt zu app / design / frontend / Vendor / Theme / Magento_Ui / requirejs-config.js hinzuzufügen:

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/validation/rules': {
                'Magento_Ui/js/lib/validation/rules-mixin': true
            }
        }
    }
};

Erstellen Sie ein JS-Skript in Ihrem Modulordner in App / Design / Frontend / Vendor / Theme / Magento_Ui / Web / JS / Lib / Validation / Rules-Mixin.js mit folgendem Inhalt:

define([
    'jquery',
    'underscore',
    'moment',
    'mage/translate'
], function ($, _, moment) {
    'use strict';

    return function (validator) {
        var validators = {
            'letters-spaces-only': [
                function (value) {
                    return /^[a-zA-Z ]*$/i.test(value);
                },
                $.mage.__('Only letters and spaces.')
            ]
        };

        validators = _.mapObject(validators, function (data) {
            return {
                handler: data[0],
                message: data[1]
            };
        });

        return $.extend(validator, validators);
    };
});