Xác thực các thành phần biểu mẫu được xây dựng thông qua các thành phần ui

Tôi đang cố gắng xác thực tùy chỉnh cho một trong các trường mẫu Magento 2 của mình được tạo thông qua các thành phần ui.
Tôi biết rằng tôi có thể tạo ra giá trị theo yêu cầu bằng cách thêm một validationmục trong cấu hình.
Như thế này:

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

Tôi cần thêm gì vào bên trong validationmục và nơi tôi đặt mã js sẽ xác thực trường của tôi dựa trên các điều kiện tùy chỉnh?
Ví dụ tôi muốn nó phù hợp với một regex nhất định.

magento2 uicomponent form-validation

— Marius
nguồn

Câu trả lời:

Về cơ bản tôi đã có thể tìm thấy câu trả lời cho điều này từ bình luận cuối cùng mà Marius đưa ra.

Như ông nói, việc xác thực cho các biểu mẫu được tạo bởi hoặc với sự trợ giúp của thành phần ui được xác thực bởi /Magent‌o/Ui/view/base/web/j‌s/lib/validation/val‌idator.js'mô-đun'. Bây giờ mô-đun này có một addRule()chức năng chính xác là những gì chúng ta cần.

Sau khi thêm xác thực tùy chỉnh trong xml của biểu mẫu của bạn:

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

Chúng tôi phải tạo một tập lệnh yêu cầu 'mô-đun' này và với sự trợ giúp của addRule sẽ thêm xác thực tùy chỉnh của chúng tôi:

[Namspace] / [Mô-đun] / lượt xem / [khu vực] /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.')
            );
});

Bây giờ điều này là không đủ. Chúng tôi phải đưa tệp này vào trang chứa biểu mẫu chúng tôi muốn xác thực.

Chúng tôi làm như vậy theo cách sau: Giả sử chúng tôi muốn thêm phần này vào khách hàng_index_edit, [khu vực] sẽ là [adminhtml] và chúng tôi thêm tệp sau: [Namespace] / [Module] / 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>

Đừng quên làm sạch bộ đệm triển khai nội dung tĩnh của bạn.

Hi vọng điêu nay co ich.

— vitoriodachef
nguồn

Từ những gì tôi hiểu

Vì vậy, bạn có thể thêm xác nhận tùy chỉnh của mình như thế này:

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

Vì vậy, ở đây REGEXPcần phải là một biểu thức thường xuyên.

Sau đó, bạn sẽ phải khai báo tập lệnh xác thực tùy chỉnh của riêng bạn để có thể xử lý 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'));

});

NB: nó có thể params.test(value)thay vìvalue.test(params)

— Raphael tại Pianism kỹ thuật số
nguồn

Điều này có ý nghĩa, nhưng làm cách nào để đưa trình xác nhận js của tôi vào trang? Hoặc tôi nên đặt js xác nhận của tôi ở đâu? Nó không giống như tôi có thể sử dụng <script scr=""ở đâu đó trong trang.

— Marius

@Marius bạn không thể bao gồm JS trong trang của bạn? Tôi có nghĩa là tạo một tệp JS và bao gồm nó trong đầu?

— Raphael tại Nghệ thuật piano kỹ thuật số

hmm ... không nên thực hiện bằng cách nào đó thông qua yêu cầu js, khi sử dụng thành phần của tôi? Tôi không biết. Tôi sẽ thử nó, nhưng nó cảm thấy bẩn. Bởi vì ví dụ, tệp js xác thực mặc định không được bao gồm trong phần đầu. Chỉ request.js và allowjs-config.

— Marius

@Marius yeah tôi có lẽ đã nói quá nhanh. Vẫn chưa được sử dụng cho tất cả những người yêu cầu công cụ

— Raphael tại Digital Pianism 7/10/2016

Tôi nghĩ rằng tôi đã tìm thấy một cái gì đó nhưng cũng không chắc chắn. Việc sử dụng $.validator.addMethodcó thể chỉ hoạt động đối với các biểu mẫu không được xây dựng thông qua các thành phần ui. Vì các thành phần xác nhận được thực hiện thông qua https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/validator.jsviệc sử dụng đó https://github.com/magento/magento2/blob/2.1/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js. Tôi nghĩ rằng tôi cần phải tìm một cách để mở rộng điều này.

— Marius