Thêm quy tắc vào quy tắc.js Magento2

Làm cách nào để thêm quy tắc mới vào Rules.js? Tôi đã tạo thêm quy tắc.js

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')
    );
});

Làm cách nào để hợp nhất quy tắc này với Rules.js?

Dưới đây là một ví dụ hoạt động đầy đủ và thực tế để thêm quy tắc tùy chỉnh vào trường kiểm tra đầu vào để kiểm tra độ tuổi tối thiểu:

Tạo một certjs-config.js trong mô-đun của bạn để thêm sự pha trộn vào validatorđối tượng Namespace/Modulename/view/frontend/requirejs-config.jsvới nội dung sau:

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

Tạo tập lệnh js vào thư mục mô-đun của bạn Namespace/Modulename/view/frontend/web/js/validator-mixin.jsvới nội dung sau:

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;
    };
});

SỬ DỤNG

Nếu bạn muốn sử dụng plugin Magento PHP để chèn trường nhập vào địa chỉ giao hàng thanh toán và xác thực nội dung của trường này bằng quy tắc tùy chỉnh mà bạn đã thêm trước đây, đây là mã mẫu:

Tạo một di.xmltệp vào etc/frontendthư mục của mô-đun của bạn với nội dung sau:

<?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>

Sau đó tạo LayoutProcessor.phptệp vào app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.phpvới nội dung sau, vui lòng cập nhật tệp theo nhu cầu của bạn:

<?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
        );
    }
}

BIÊN TẬP

Cảm ơn @ alan-bão vì lời giải thích của bạn ở đây https://alanstorm.com/the-cantly-case-of-magento-2-mixins/ và @ jisse-reitsma mang theo hướng

Cộng với Magento 2 doc http://devdocs.magento.com/guides/v2.2/javascript-dev-guide/javascript/js_mixins.html

Bản gốc rules.jstrả về một đối tượng theo nghĩa đen, chứa tất cả các quy tắc. Bạn có thể sửa đổi đối tượng này theo nghĩa đen bằng cách thêm một mixin vào tệp này. Các tài liệu Magento cung cấp một số hướng dẫn về cách thực hiện việc này: Magento Javascript Mixins

Vấn đề tương tự đã được trả lời ở đây: Magento 2 thêm quy tắc xác thực tùy chỉnh

Một nguồn thực sự tốt để hiểu hệ thống này có tại đây: https://alanstorm.com/the-cantly-case-of-magento-2-mixins/

Và không chính xác những gì bạn đang cố gắng thực hiện, nhưng một nguồn rất tốt ở đây: https://www.youtube.com/watch?v=0fguDL5iEd0&t=540s

Nó làm việc cho tôi:

Tạo một certjs-config.js trong mô-đun của bạn để thêm sự pha trộn vào đối tượng trình xác nhận hợp lệ vào ứng dụng / thiết kế / frontend / Vendor / Theme / Magento_Ui / allowjs-config.js với nội dung sau:

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

Tạo tập lệnh js vào thư mục mô-đun của bạn vào app / design / frontend / Vendor / Theme / Magento_Ui / web / js / lib / verify / rule-mixin.js với nội dung sau:

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);
    };
});