Tambahkan aturan ke rules.js Magento2


10

Bagaimana cara menambahkan aturan baru ke rules.js? Saya telah membuat extra-rules.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')
    );
});

Bagaimana cara menggabungkan aturan ini ke rules.js?

Jawaban:


21

Berikut adalah contoh kerja penuh dan nyata untuk menambahkan aturan khusus ke checkout bidang input untuk memeriksa usia minimum:

Buat requirejs-config.js di modul Anda untuk menambahkan campuran ke validatorobjek Namespace/Modulename/view/frontend/requirejs-config.jsdengan konten berikut:

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

Buat skrip js ke folder modul Anda Namespace/Modulename/view/frontend/web/js/validator-mixin.jsdengan konten berikut:

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

PEMAKAIAN

Jika Anda ingin menggunakan plugin Magento PHP untuk memasukkan bidang input ke alamat pengiriman checkout Anda dan memvalidasi konten bidang ini dengan aturan khusus yang sebelumnya Anda tambahkan, berikut ini contoh kode:

Buat di.xmlfile ke etc/frontendfolder modul Anda dengan konten berikut:

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

Kemudian buat LayoutProcessor.phpfile ke dalam app/code/Namespace/Modulename/Plugin/Block/Checkout/LayoutProcessor.phpdengan konten berikut, harap perbarui untuk kebutuhan Anda:

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

EDIT

Terima kasih @ alan-storm untuk penjelasan Anda di sini https://alanstorm.com/the-curious-case-of-magento-2-mixins/ dan @ jisse-reitsma membawa arah

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


1
Saya mendapatkan kesalahan Loading failed for the <script> with source “.../validator-mixin.js"dan Script error for: Namespace_Modulename/js/validator-mixin.
Jurģis Toms Liepiņš

1
validator-mixin.jslokasi harus:/view/frontend/web/js/validator-mixin.js
Jur Tis Toms Liepiņš

1
Tidak berfungsi, Magento 2 mengabaikan ini
cjohansson

@cjohansson mungkin karena itu dilakukan untuk proyek Magento 2.1 dan 2.2. Jika Anda menggunakan 2.3, itu mungkin tidak lagi mungkin. Dalam kasus kami ini bekerja untuk versi yang saya sebutkan
Sylvain Rayé

1

Dokumen asli rules.jsmengembalikan objek literal, berisi semua aturan. Anda dapat memodifikasi objek literal ini dengan menambahkan mixin ke file ini. Dokumen Magento memberikan panduan tentang cara melakukan ini: Magento Javascript Mixins



0

Ini bekerja untuk saya:

Buat requirejs-config.js di modul Anda untuk menambahkan pencampuran ke objek validator ke aplikasi / desain / antarmuka / Vendor / Tema / Magento_Ui / requireejs-config.js dengan konten berikut:

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

Buat skrip js ke folder modul Anda ke dalam app / design / frontend / Vendor / Theme / Magento_Ui / web / js / lib / validasi / rules-mixin.js dengan konten berikut:

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);
    };
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.