Magento 2 - Formularvalidierung

32

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

ClassMP
quelle

Antworten:

37

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
Nikunj Gandhi
quelle
2
Gibt es ein Beispiel für die Verwendung von Mustern? TNX
Antonio Pedicini
35

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/

Vaibhav Ahalpara
quelle
Ich möchte die serverseitige Validierung in Magento 2 anwenden. Bitte teilen Sie mir einen Link oder ein Dokument mit.
Khushbu_sipl
Ich denke, Sie haben hier bereits eine Frage gestellt magento.stackexchange.com/questions/161300/… Möge dieser Link anderen helfen
Vaibhav Ahalpara
9

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
Kirby
quelle
3

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:

MagePsycho
quelle
Danke für die Antwort. Ich habe auch das neue Attribut data-validate gefunden, aber es ist interessant, welche Validierungen verfügbar sind. In meinem Fall möchte ich eine Checkbox und eine Reihe von RadioButton
ClassMP 28.12.15
Ich möchte die serverseitige Validierung in Magento 2 anwenden. Bitte teilen Sie mir einen Link oder ein Dokument mit.
Khushbu_sipl
2

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.

Key Shang
quelle
1

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/

Dhaval Dave
quelle
0

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.

Stanislav Spuzyak
quelle