Magento 2 - Formularvalidierung

Gibt es eine Übersicht über die neuen Formularvalidierungsattribute in Magento 2?

Sie können eine Klasse zur Validierung in Magento 2 hinzufügen. Siehe folgendes Beispiel. Es gibt fast 72 Regeln (Validierungsklasse), die Sie verwenden können:

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

Im Blog finden Sie eine Liste der verfügbaren Regeln für weitere Informationen:

Hier ist eine Liste der von Magento 2 unterstützten Validierungsklassenregeln. Sie müssen lediglich eine CSS-Klasse hinzufügen, damit die Regel angewendet wird.

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

Es gibt 3 verschiedene Möglichkeiten, die Formularüberprüfung in Magento 2 zu verwenden

Verwenden Sie den folgenden Code in Ihrer Vorlage, um die JavaScript-Überprüfung zu aktivieren

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

* Benutzerdefiniertes Formular ist Formular-ID. Sie können es durch Ihre Formular-ID ersetzen

Liste der Formularvalidierungsregeln

Zum Abschluss dieses Artikels finden Sie hier eine Liste der Namen der Validierungsregeln als Kurzreferenz für die offizielle Dokumentation:

Magento-Regeln:

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

jQuery-Regeln:

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

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

In UI-Komponenten kann es mit der folgenden Beispielkonfiguration (Magento v2.2.0) verwendet werden:

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

Weitere Beispiele finden Sie in der Datei:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

Die Prüferliste in den UI-Komponenten finden Sie in
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.

Ich habe gerade dieses Skript geschrieben, um alle Schlüssel mit Fehlermeldungen zur Erklärung abzurufen:

• Pflichtfeld:
  Dies ist ein Pflichtfeld.
• Alphanum mit Leerzeichen validieren:
  Bitte verwenden Sie nur Buchstaben (az oder AZ), Zahlen (0-9) oder Leerzeichen in diesem Feld.
• phoneUK:
  Bitte geben Sie eine gültige Telefonnummer an
• Bestätigungs-E-Mail:
  Bitte geben Sie eine gültige E-Mail-Adresse ein (Beispiel: [email protected]).
• ipv4:
  Bitte geben Sie eine gültige IP v4-Adresse ein.
• checked:
  Dies ist ein Pflichtfeld.
• validate-select:
  Bitte wählen Sie eine Option.
• ipv6:
  Bitte geben Sie eine gültige IP v6-Adresse ein.
• Zeit:
  Bitte geben Sie eine gültige Zeit zwischen 00:00 und 23:59 ein
• validate-number:
  Bitte geben Sie eine gültige Nummer in dieses Feld ein.
• validate-phoneLax:
  Bitte geben Sie eine gültige Telefonnummer ein. Zum Beispiel (123) 456-7890 oder 123-456-7890.
• dateITA:
  Bitte geben Sie ein korrektes Datum ein
• validate-xml-identifier:
  Bitte geben Sie einen gültigen XML-identifier ein (Bsp .: something_1, block5, id-4).
• validate-clean-url:
  Bitte geben Sie eine gültige URL ein. Zum Beispiel http://www.example.com oder www.example.com.
• validate-admin-password:
  Bitte geben Sie 7 oder mehr Zeichen ein, sowohl numerisch als auch alphabetisch.
• validate-no-html-tags:
  HTML-Tags sind nicht erlaubt.
• validate-integer:
  Bitte geben Sie eine gültige Ganzzahl in dieses Feld ein.
• validate-data:
  Bitte verwenden Sie in diesem Feld nur Buchstaben (az oder AZ), Zahlen (0-9) oder Unterstriche (_). Das erste Zeichen sollte ein Buchstabe sein.
• validate-cc-ukss:
  Bitte geben Sie die Ausgabenummer oder das Startdatum für den Switch / Solo-Kartentyp ein.
• Min-Wörter:
  Bitte geben Sie mindestens {0} Wörter ein.
• alphanumerisch:
  Bitte nur Buchstaben, Zahlen, Leerzeichen oder Unterstriche
• validate-identifier:
  Bitte geben Sie einen gültigen URL-Schlüssel ein (Beispiel: "example-page", "example-page.html" oder "anotherlevel / example-page").
• validate-street:
  Bitte verwenden Sie in diesem Feld nur Buchstaben (az oder AZ), Zahlen (0-9), Leerzeichen und "#".
• validate-zip-international:
  Bitte geben Sie eine gültige Postleitzahl ein.
• Gültigkeitsdatum:
  Bitte geben Sie ein gültiges Datum ein.
• validate-larger-than-zero:
  Bitte geben Sie eine Zahl größer als 0 in dieses Feld ein.
• validate-digits:
  Bitte geben Sie eine gültige Nummer in dieses Feld ein.
• validate-ssn:
  Bitte geben Sie eine gültige Sozialversicherungsnummer ein (Beispiel: 123-45-6789).
• Nicht-Negativ-Betrag:
  Bitte geben Sie eine positive Zahl in dieses Feld ein.
• validate-max-size: Die
  Datei, die Sie hochladen möchten, überschreitet die maximale Dateigröße.
• validate-fax:
  Bitte geben Sie eine gültige Faxnummer ein (Bsp .: 123-456-7890).
• validate-if-tag-script-exists:
  Verwenden Sie das Tag SCRIPT mit dem SRC-Attribut oder mit dem richtigen Inhalt, um JavaScript in das Dokument aufzunehmen.
• min_text_length:
  Bitte geben Sie mindestens {0} Zeichen ein.
• validate-date-au:
  Bitte verwenden Sie dieses Datumsformat: TT / MM / JJJJ. Zum Beispiel 17/03/2006 für den 17. März 2006.
• mobileUK:
  Bitte geben Sie eine gültige Handynummer an
• Buchstaben-mit-einfachen-Satzzeichen:
  Bitte nur Buchstaben oder Satzzeichen
• validate-number-range:
  Der Wert liegt nicht im angegebenen Bereich.
• phoneUS:
  Bitte geben Sie eine gültige Telefonnummer an
• date_range_max:
  Das Datum liegt nicht im angegebenen Bereich.
• validate-range:
  Der Wert liegt nicht im angegebenen Bereich.
• vinUS:
  Die angegebene Fahrzeugidentifikationsnummer (VIN) ist ungültig.
• Bereichswörter:
  Bitte geben Sie zwischen {0} und {1} Wörter ein.
• validate-zip-us:
  Bitte geben Sie eine gültige Postleitzahl ein (Beispiel: 90602 oder 90602-1234).
• Bestätigungs-E-Mails:
  Bitte geben Sie gültige E-Mail-Adressen ein, die durch Kommas getrennt sind. Zum Beispiel [email protected], [email protected].
• validate-css-length:
  Bitte geben Sie eine gültige CSS-Länge ein (Beispiel: 100px, 77pt, 20em, .5ex oder 50%).
• 
  PLZ -Bereich: Ihre Postleitzahl muss im Bereich von 902xx-xxxx bis 905-xx-xxxx liegen
• validate-phoneStrict:
  Bitte geben Sie eine gültige Telefonnummer ein. Zum Beispiel (123) 456-7890 oder 123-456-7890.
• dateNL:
  Vul hier een geldige datum in.
• Nur
  Briefe : Bitte nur Briefe
• max_text_length:
  Bitte geben Sie höchstens {0} Zeichen ein.
• validate-not-negative-number:
  Bitte geben Sie eine Zahl von 0 oder mehr in dieses Feld ein.
• validate-per-page-value-list:
  Bitte geben Sie einen gültigen Wert ein, zB 10,20,30
• No-Whitespace:
  Bitte keinen Leerraum
• validate-state:
  Bitte Staat / Provinz auswählen.
• validate-url:
  Bitte geben Sie eine gültige URL ein. Protokoll ist erforderlich (http: //, https: // oder ftp: //).
• date_range_min:
  Das Datum liegt nicht im angegebenen Bereich.
• validate-digits-range:
  Der Wert liegt nicht innerhalb des angegebenen Bereichs.
• Größer als gleich:
  Geben Sie einen Wert ein, der größer oder gleich {0} ist.
• validate-no-empty:
  Leerer Wert.
• validate-zero-or-larger:
  Bitte geben Sie eine Zahl von 0 oder höher in dieses Feld ein.
• validate-cc-number:
  Bitte geben Sie eine gültige Kreditkartennummer ein.
• validate-emailSender:
  Bitte geben Sie eine gültige E-Mail-Adresse ein (Beispiel: [email protected]).
• validate-new-password:
  Bitte geben Sie 6 oder mehr Zeichen ein. Führende und nachfolgende Leerzeichen werden ignoriert.
• validate-customer-password: Die
  Mindestlänge dieses Feldes muss mindestens% 1 Zeichen betragen. Führende und nachfolgende Leerzeichen werden ignoriert.
• Passwort bestätigen:
  Bitte geben Sie 6 oder mehr Zeichen ein. Führende und nachfolgende Leerzeichen werden ignoriert.
• less-than-equals-to:
  Bitte geben Sie einen Wert ein, der kleiner oder gleich {0} ist.
• validate-currency-dollar:
  Bitte geben Sie einen gültigen $ Betrag ein. Zum Beispiel $ 100.00.
• time12h:
  Bitte geben Sie eine gültige Zeit zwischen 00:00 und 12:00 Uhr ein
• validate-alphanum:
  Bitte verwenden Sie in diesem Feld nur Buchstaben (az oder AZ) oder Zahlen (0-9). Leerzeichen oder andere Zeichen sind nicht zulässig.
• validate-item-quantity:
  Wir erkennen oder unterstützen diesen Dateierweiterungstyp nicht.
• validate-code:
  Bitte verwenden Sie in diesem Feld nur Buchstaben (az), Zahlen (0-9) oder Unterstriche (_). Das erste Zeichen sollte ein Buchstabe sein.
• email2:
  Bitte geben Sie eine gültige Kreditkartennummer ein.
• max-words:
  Bitte geben Sie {0} Wörter oder weniger ein.
• Stripped-Min-Length:
  Bitte geben Sie mindestens {0} Zeichen ein
• validate-alpha:
  Bitte verwenden Sie in diesem Feld nur Buchstaben (az oder AZ).
• Muster:
  Ungültiges Format.
• Ganzzahl:
  Eine positive oder negative Nicht-Dezimalzahl

Das Drehbuch:

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

Wenn Sie auf / customer / account / create page verweisen, sehen Sie den folgenden Code unter dem Formular:

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

Wenn Sie die Eingabeattribute des Formulars überprüfen, können Sie Magento 1 wie classAttributwerte zusammen mit neuen data-validateAttributen sehen. Dies kann die Grundlage für eine Aufstockung sein.

Schlüsseldateien für die Validierung:

• 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

Wenn Sie UI-Komponenten verwenden , um Formulare zu erstellen, können Sie die unten stehende Validierung verwenden. Sie funktioniert in Magento 2.1.x, ich habe sie noch nicht in einer anderen Version getestet.

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

Beachten Sie die Validierung Artikel, darin wir hinzufügen könnten Regeln Validierung , wie required-entry, validate-integerusw.

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

Alle Prüfregeln Sie in der Datei finden konnte vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, wie validate-date, validate-emailsusw.

Ich habe die gleichen Anforderungen für die Magento2-Formularüberprüfung und habe diesen Code erstellt

Zuerst richten wir ein Testformular ein

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

So aktivieren Sie die JavaScript-Überprüfung für die Magento2-Formularüberprüfung

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

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

Die Option "No-Whitespace" funktioniert nicht richtig (zumindest unter Magento 2.1). Es wird eine Fehlermeldung für jede Art von "Leerzeichen" ausgelöst. Die Werte "test me" und "test me" geben denselben Fehler zurück.