Magento 2 - Walidacja formularza

czy jest przegląd nowych atrybutów sprawdzania poprawności formularza w Magento 2?

Możesz dodać klasę do walidacji w Magento 2. Zobacz przykład poniżej. Istnieje prawie 72 reguły (klasa walidacji), których możesz użyć:

$fieldset->addField(
    'email_from',
    'text',
    ['name' => 'email_from', 'label' => __('Email From'), 'title' => __('Email From'), 'required' => true, 'class' => 'validate-email']
);

Aby uzyskać więcej informacji, zobacz blog, aby uzyskać listę dostępnych reguł :

Oto lista reguł klas walidacji obsługiwanych przez magento 2. Wystarczy dodać klasę css, aby zastosować regułę.

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

Istnieją 3 różne sposoby użycia sprawdzania poprawności formularza w Magento 2

Aby włączyć sprawdzanie javascript, użyj następującego kodu w swoim szablonie

<form class="form" id="custom-form" method="post" autocomplete="off">
 <fieldset class="fieldset">
     <legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
      <div class="field required">
          <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
          <div class="control">
              <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
          </div>
      </div>
 </fieldset>
 <div class="actions-toolbar">
      <div class="primary">
          <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
      </div>
  </div>
</form>

1

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "validation": {}
        }
    }
</script>

2)

<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">

3)

<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){

   var dataForm = $('#custom-form');
   dataForm.mage('validation', {});

});
</script>

* formularz niestandardowy to identyfikator formularza, który można zastąpić identyfikatorem formularza

Lista reguł sprawdzania poprawności formularzy

Aby zakończyć ten artykuł, tutaj znajduje się lista nazw reguł sprawdzania poprawności jako szybkie odniesienie do oficjalnej dokumentacji:

Zasady Magento:

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

required-number

validate-number-range

validate-digits

validate-digits-range

validate-range

validate-alpha

validate-code

validate-alphanum

validate-date

validate-date-range

validate-cpassword

validate-identifier

validate-zip-international

validate-one-required

validate-state

required-file

validate-ajax-error

validate-optional-datetime

validate-required-datetime

validate-one-required-by-name

less-than-equals-to

greater-than-equals-to

validate-emails

validate-cc-type-select

validate-cc-number

validate-cc-type

validate-cc-exp

validate-cc-cvn

validate-cc-ukss

validate-length

required-entry

not-negative-amount

validate-per-page-value-list

validate-per-page-value

validate-new-password

required-if-not-specified

required-if-all-sku-empty-and-file-not-loaded

required-if-specified

required-number-if-specified

datetime-validation

required-text-swatch-entry

required-visual-swatch-entry

required-dropdown-attribute-entry

Validate-item-quantity

validate-grouped-qty

validate-one-checkbox-required-by-name

validate-date-between

validate-dob

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

allow-container-className

Zasady jQuery:

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

patrz http://inchoo.net/magento-2/validate-custom-form-in-magento-2/

W komponentach interfejsu użytkownika można go użyć, wykonując przykładową konfigurację (Magento v2.2.0):

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="general">
        <field name="priority" sortOrder="1000" formElement="input">
            <settings>
                <validation>
                    <rule name="not-negative-amount" xsi:type="boolean">true</rule>
                </validation>
                [...]
            </settings>
        </field>
    </fieldset>
</form>

Zobacz więcej przykładów w pliku:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

Lista walidatorów w komponentach interfejsu użytkownika, w której można ją znaleźć
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.

Właśnie napisałem ten skrypt, aby pobrać wszystkie klucze z komunikatami o błędach w celu wyjaśnienia:

• wymagany wpis:
  To pole jest wymagane.
• validate-alphanum-with-spaces:
  W tym polu należy używać tylko liter (az lub AZ), cyfr (0-9) lub spacji.
• phoneUK:
  Podaj prawidłowy numer telefonu
• validate-email:
  Podaj prawidłowy adres e-mail (np. [email protected]).
• ipv4:
  Wprowadź poprawny adres IP v4.
• zaznaczone:
  To pole jest wymagane.
• Zatwierdź-wybierz:
  Wybierz opcję.
• ipv6:
  Wprowadź prawidłowy adres IP v6.
• czas:
  Podaj prawidłowy czas między 00:00 a 23:59
• validate-number:
  Wprowadź poprawny numer w tym polu.
• validate-phoneLax:
  Podaj prawidłowy numer telefonu. Na przykład (123) 456-7890 lub 123-456-7890.
• dateITA:
  Proszę wprowadzić poprawną datę
• validate-xml-identifier:
  Proszę wprowadzić poprawny identyfikator XML (np .: coś_1, blok5, id-4).
• validate-clean-url:
  Proszę wprowadzić poprawny adres URL. Na przykład http://www.example.com lub www.example.com.
• validate-admin-password:
  Wpisz 7 lub więcej znaków, używając zarówno cyfr, jak i alfabetu.
• validate-no-html-tags:
  tagi HTML są niedozwolone.
• validate-integer:
  Wprowadź poprawną liczbę całkowitą w tym polu.
• validate-data:
  W tym polu należy używać tylko liter (az lub AZ), cyfr (0–9) lub podkreślenia (_), a pierwszym znakiem powinna być litera.
• validate-cc-ukss:
  Wprowadź numer wydania lub datę rozpoczęcia dla typu karty zamiany / solo.
• min-words:
  Wpisz co najmniej {0} słów.
• alfanumeryczny: Proszę tylko
  litery, cyfry, spacje lub podkreślenia
• validate-identifier:
  Wprowadź poprawny klucz URL (np. „przykładowa strona”, „przykładowa strona.html” lub „inna strona / przykładowa strona”).
• validate-street:
  W tym polu należy używać tylko liter (az lub AZ), cyfr (0–9), spacji i „#”.
• validate-zip-international:
  Wprowadź poprawny kod pocztowy.
• validate-date:
  Podaj prawidłową datę.
• validate-more-than-zero:
  Wprowadź liczbę większą niż 0 w tym polu.
• validate-digits:
  Wprowadź poprawny numer w tym polu.
• validate-ssn:
  Proszę wprowadzić poprawny numer ubezpieczenia społecznego (np. 123-45-6789).
• kwota nieujemna:
  w tym polu wprowadź liczbę dodatnią.
• validate-max-size:
  plik, który próbujesz przesłać, przekracza maksymalny limit rozmiaru pliku.
• validate-fax:
  Wprowadź poprawny numer faksu (np .: 123-456-7890).
• validate-if-tag-script-exist:
  Użyj tagu SCRIPT z atrybutem SRC lub z odpowiednią zawartością, aby dołączyć JavaScript do dokumentu.
• min_text_length:
  Wprowadź więcej lub więcej niż {0} symboli.
• validate-date-au:
  Użyj tego formatu daty: dd / mm / rrrr. Na przykład 17/03/2006 z 17 marca 2006.
• mobileUK:
  Proszę podać poprawny numer telefonu komórkowego
• letters-with-basic-punc:
  Proszę tylko o litery lub znaki interpunkcyjne
• validate-number-range:
  wartość nie mieści się w określonym zakresie.
• phoneUS:
  Proszę podać poprawny numer telefonu
• date_range_max:
  Data nie mieści się w określonym zakresie.
• validate-range:
  wartość nie mieści się w określonym zakresie.
• vinUS:
  Podany numer identyfikacyjny pojazdu (VIN) jest nieprawidłowy.
• słowa-zakresy:
  wprowadź od {0} do {1} słów.
• validate-zip-us:
  Wprowadź poprawny kod pocztowy (np. 90602 lub 90602-1234).
• 
  Sprawdź poprawność wiadomości e-mail: wprowadź prawidłowe adresy e-mail, oddzielając je przecinkami. Na przykład [email protected], [email protected].
• validate-css-length:
  Wprowadź poprawną długość CSS (np .: 100px, 77pt, 20em, .5ex lub 50%).
• kod pocztowy:
  kod pocztowy musi mieścić się w zakresie od 902xx-xxxx do 905-xx-xxxx
• validate-phoneStrict:
  Wprowadź poprawny numer telefonu. Na przykład (123) 456-7890 lub 123-456-7890.
• dateNL:
  Vul hier een geldige datum in.
• tylko
  litery : proszę tylko o litery
• max_text_length:
  Wpisz mniej niż lub równe {0} symbolom.
• validate-not-negative-number:
  Wpisz w polu liczbę 0 lub większą.
• validate-per-page-value-list:
  Proszę wprowadzić poprawną wartość, np .: 10,20,30
• bez białych znaków:
  Proszę nie wstawiać białych znaków
• validate-state:
  Wybierz State / Province.
• validate-url:
  Proszę wprowadzić poprawny adres URL. Wymagany jest protokół (http: //, https: // lub ftp: //).
• date_range_min:
  Data nie mieści się w określonym zakresie.
• validate-digits-range:
  wartość nie mieści się w określonym zakresie.
• more-than-equals-to:
  Wprowadź wartość większą lub równą {0}.
• validate-no-empty:
  Pusta wartość.
• validate-zero-or-greater:
  Wpisz w polu wartość 0 lub większą.
• validate-cc-number:
  Podaj prawidłowy numer karty kredytowej.
• validate-email Nadawca:
  Wprowadź poprawny adres e-mail (np. [email protected]).
• validate-new-password:
  Wprowadź 6 lub więcej znaków. Wiodące i końcowe spacje zostaną zignorowane.
• validate-customer-password:
  Minimalna długość tego pola musi być równa lub większa niż% 1 symboli. Wiodące i końcowe spacje zostaną zignorowane.
• validate-password:
  Wprowadź 6 lub więcej znaków. Wiodące i końcowe spacje zostaną zignorowane.
• mniej-niż-równa-do:
  Wprowadź wartość mniejszą lub równą {0}.
• validate-currency-dollar:
  Podaj prawidłową kwotę $. Na przykład 100,00 $.
• time12h:
  Podaj prawidłowy czas od 00:00 do 12:00
• validate-alphanum:
  W tym polu należy używać tylko liter (az lub AZ) lub cyfr (0–9). Niedozwolone są spacje ani inne znaki.
• validate-item-ilość:
  Nie rozpoznajemy ani nie obsługujemy tego typu rozszerzenia pliku.
• validate-code:
  W tym polu należy używać tylko liter (az), cyfr (0-9) lub podkreślenia (_), a pierwszym znakiem powinna być litera.
• email2:
  Proszę podać poprawny numer karty kredytowej.
• max-words:
  Wpisz {0} słów lub mniej.
• stripped-min-length:
  Wprowadź co najmniej {0} znaków
• validate-alpha:
  W tym polu należy używać tylko liter (az lub AZ).
• wzorzec:
  nieprawidłowy format.
• liczba całkowita:
  dodatnia lub ujemna liczba nie dziesiętna, proszę

Scenariusz:

declare -A list
key=''
while IFS= read -r line; do
#  echo "${line} -"
  if [ -z "${key:-}" ]; then
    # match validation key
    match=$(echo "${line}" | grep -Eo "^        ['\"]([A-Za-z0-9-]|_)+" | tr -d "' ")
    if [ -n "${match}" ]; then
      key=${match}
    fi
  else
    # match message
    match=$(echo "${line}" | sed -rn "s|.*\\$\.mage\.__[(]['\"](.*)['\"][)].*|\1|p")
    if [ -n "${match}" ]; then
      list[${key}]=${match}
      key=''
    fi
  fi
done < "${DOCROOT_DIR:-/var/www/html}/vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js"

for i in "${!list[@]}"
do
  printf "%s:\n    %s\n" "${i}" "${list[$i]}"
done

Jeśli odwołujesz się do strony / customer / account / create, pod formularzem możesz zobaczyć następujący fragment kodu:

<script>
require([
    'jquery',
    'mage/mage'
], function($){

    var dataForm = $('#form-validate');
    var ignore = null;

    dataForm.mage('validation', {
            ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
        }).find('input:text').attr('autocomplete', 'off');

});
</script>

A jeśli sprawdzisz atrybuty wejściowe formularza, zobaczysz classwartości atrybutów podobne do Magento 1 wraz z nowym data-validateatrybutem. Może to być podstawa do przyspieszenia.

Pliki kluczy do sprawdzania poprawności:

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/jquery/jquery.validate.js

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/mage/validation.js

• https://raw.githubusercontent.com/magento/magento2/develop/lib/web/mage/validation/validation.js

Kiedy używamy komponentów interfejsu użytkownika do tworzenia formularzy, moglibyśmy użyć walidacji jak poniżej, działa to w Magento 2.1.x, nie testuję jej jeszcze w innej wersji.

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

Zauważ sprawdzania elementu, w nim możemy dodać reguły sprawdzania poprawności , jak required-entry, validate-integeretc.

<item name="validation" xsi:type="array">
     <item name="required-entry" xsi:type="boolean">true</item>
     <item name="validate-integer" xsi:type="boolean">true</item>
     <item name="validation_rule_name" xsi:type="boolean">true</item>
     ...
</item>

Wszystkie zasady walidacji można znaleźć w pliku vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, jak validate-date, validate-emailsetc.

Mam takie same wymagania dotyczące sprawdzania poprawności formularza Magento2 i zrobiłem ten kod

Najpierw skonfigurujemy formularz testowy

<!-- form tag -->
<form class="form" id="custom-form-id" method="post" autocomplete="off">
   <fieldset class="fieldset">
       <legend class="legend"><span><?php echo __('User Personal Information') ?></span></legend><br>
        <div class="field required">
            <!-- form field -->
            <label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
            <div class="control">
                <input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
            </div>
        </div>
   </fieldset>
   <!-- submit button -->
   <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" class="action submit primary" title="<?php  echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
        </div>
    </div>
</form>

Aby włączyć sprawdzanie javascript dla sprawdzania poprawności formularza Magento2

<!-- enable javascript validation for custom-form-id -->
<script type="text/x-magento-init">
    {
        "#custom-form-id": {
            "validation": {}
        }
    }
</script>

Odniesienia :: http://www.onlinecode.org/magento2-form-validation-example/

Opcja „bez białych znaków” nie działa poprawnie (przynajmniej w Magento 2.1). Powoduje wyświetlenie komunikatu o błędzie na dowolnym znaku „spacji”. Wartości „test me” i „test me” zwrócą ten sam błąd.