UIコンポーネントを介して構築されたフォーム要素の検証

私は、ui-componentsを介して生成されたMagento 2フォームフィールドの1つに対してカスタム検証を実行しようとしています。設定に項目を
追加するvalidationことで、必要な値を作成できることを知っています。
このような：

   <field name="title">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Some label here</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">whatever</item>
                <item name="sortOrder" xsi:type="number">999</item>
                <item name="dataScope" xsi:type="string">whatever</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item><!-- this validates it as required -->
                </item>
            </item>
        </argument>
    </field>

validationアイテム内に何を追加する必要があり、カスタム条件に基づいてフィールドを検証する必要があるjsコードをどこに配置すればよいですか？
たとえば、特定の正規表現に一致させる必要があります。

magento2 uicomponent form-validation

— マリウス
ソース

回答:

基本的には、マリウスの最後のコメントからその答えを見つけることができました。

彼が言ったように、uiコンポーネントによって生成されたフォームの検証は、/Magent‌o/Ui/view/base/web/j‌s/lib/validation/val‌idator.js「モジュール」によって検証されます。このモジュールには、addRule()まさに私たちが必要とする機能があります。

フォームのxmlにカスタム検証を追加した後：

<field name="title">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Some label here</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">whatever</item>
                <item name="sortOrder" xsi:type="number">999</item>
                <item name="dataScope" xsi:type="string">whatever</item>
                <item name="validation" xsi:type="array">
                    <item name="custom-validation" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>

この「モジュール」を必要とするスクリプトを作成する必要があり、addRuleを使用してカスタム検証を追加します。

[Namspace] / [モジュール] / view / [エリア] /web/js/our_custom_validation.js

   require(
        [
            'Magento_Ui/js/lib/validation/validator',
            'jquery',
            'mage/translate'
    ], function(validator, $){

            validator.addRule(
                'custom-validation',
                function (value) {
                    //return true or false based on your logic

                }
                ,$.mage.__('Custom Validation message.')
            );
});

これでは十分ではありません。検証するフォームを保持するページにこのファイルを含める必要があります。

これは次の方法で行います。これをcustomer_index_editに追加したいとします。[領域]は[adminhtml]となり、次のファイルを追加します。[名前空間] / [モジュール] / view / adminhtml / layout / customer_index_edit .xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Namespace_Module::js/our_custom_validation.js"/>
    </head>
</page>

キャッシュをクリーンアップして静的コンテンツをデプロイすることを忘れないでください。

お役に立てれば。

— ヴィトリオダシェフ
ソース

私が理解したことから

したがって、次のようにカスタム検証を追加できます。

<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    <item name="validate-regexp" xsi:type="string">REGEXP</item>
</item>

だからここにREGEXP正規表現が必要です。

次に、独自の検証スクリプトを宣言して、処理できるようにする必要があります validate-regexp

require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'jquery/validate', // Jquery Validation Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){ 
$.validator.addMethod(
'validate-regexp', function (value, params) { 
return value.test(params); // Validation logic here
}, $.mage.__('Enter Valid Field'));

});

注意：params.test(value)代わりにvalue.test(params)

— デジタルピアニズムのラファエル
ソース

これは理にかなっていますが、ページにjsバリデーターを含めるにはどうすればよいですか？または、検証jsはどこに置くべきですか？<script scr=""ページのどこかで使用できるようではありません。

— マリウス

@Mariusは、ページにJSを含めることはできませんか？JSファイルを作成してヘッドに含めますか？

— デジタルピアニズムのラファエル、

うーん...私のコンポーネントを使用するとき、それはどういうわけかrequire jsを介して行われるべきではありませんか？知りません。やってみますがなんとなく汚れています。たとえば、デフォルトの検証jsファイルがヘッドに含まれていないためです。require.jsとrequirejs-configのみ。

— マリウス

@マリウスええ、私はおそらく速すぎる話をしました。必要なものすべてにまだ使用されていません

— デジタルピアニズムのラファエル、2016年

何かを見つけたと思いますが、確かではありません。の使用$.validator.addMethodは、UIコンポーネントを介して構築されていないフォームに対してのみ機能します。Fo ui-components検証はhttps://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/validator.jsを使用して行われますhttps://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js。これを拡張する方法を見つける必要があると思います。

— マリウス