Magento 2：如何使用参数在 UI 组件中实现验证

Question

好的。每个人都知道如何通过 XML 将验证规则添加到 ui 组件字段。不幸的是，我找不到任何人似乎知道如何实现需要一两个参数的规则。我确信知识已经存在，但没有人问过这个问题。所以就在这里。

我正在寻求为文本区域实现

min-words

验证规则。我有这样的东西：

<field name="text_area">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            ...
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
                <item name="min-words" xsi:type="array">
                    <item name="length" xsi:type="number">10</item>
                </item>
            </item>
            ...
        </item>
    </argument>
</field>

但我猜，这不太管用。我很接近，但无法弄清楚“长度”参数到底应该是什么，并且查看

rules.js

文件没有提供任何线索。

Answer 1

所以对于

min-words

规则，我发现它很简单：

<item name="min-words" xsi:type="number">10</item>

看到参数的其他实现（不在验证规则中），我想我应该尝试一下

range-words

规则，并发现了这种格式：

<item name="range-words" xsi:type="array">
   <item name="0" xsi:type="number">5</item>
   <item name="1" xsi:type="number">10</item>
</item>

此格式将提供类似的需要参数的规则，例如

zip-range, validate-number-range, validate-digits-range, validate-range, validate-date-range, validate-item-quantity, validate-file-type

。请注意使用

name="0"

作为每个条目的数组索引。

Answer 2

您可以在此处找到所有验证规则的列表。

min_text_length
max_text_length
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-identifier
validate-zip-international
validate-state
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-number
validate-cc-ukss
required-entry
checked
not-negative-amount
validate-per-page-value-list
validate-new-password
validate-item-quantity
equalTo

例如：

<field name="email">
            <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">Email Address</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">email</item>
                    <item name="dataScope" xsi:type="string">email</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                        <item name="validate-email" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>