Magento 2-フォーム検証

Magento 2の新しいフォーム検証属性の概要はありますか？

Magento 2で検証用のクラスを追加できます。以下の例を参照してください。使用できるルール（検証クラス）はほぼ72です：

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

詳細については、利用可能なルールのリストについてのブログを参照してください。

magento 2でサポートされている検証クラスルールのリストを以下に示します。ルールを適用するには、cssクラスを追加するだけです。

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

magento 2でフォーム検証を使用する方法は3つあります

JavaScript検証を有効にするには、テンプレートで次のコードを使用します

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

* custom-formはフォームIDです。フォームIDに置き換えることができます

フォーム検証ルールのリスト

この記事を締めくくるために、公式ドキュメントへのクイックリファレンスとして、検証ルール名のリストを以下に示します。

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

jQueryルール：

required,

remote,

email,

url,

date,

dateISO,

number,

digits,

creditcard,

equalTo,

maxlength,

minlength,

rangelength,

range,

max,

min

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

UIコンポーネントでは、次のサンプル構成（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>

ファイル内のその他の例を参照してください。
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml

UIコンポーネントのバリデーターリストは、にあり
vendor/magento/module-ui/view/base/web/js/lib/validation/rules.jsます。

説明のためにエラーメッセージですべてのキーを取得するためにこのスクリプトを作成しました。

• required-entry：
  これは必須フィールドです。
• validate-alphanum-with-spaces：
  このフィールドには、文字（azまたはAZ）、数字（0-9）、またはスペースのみを使用してください。
• phoneUK：
  有効な電話番号を指定してください
• validate-email：
  有効なメールアドレスを入力してください（例：johndoe@domain.com）。
• ipv4：
  有効なIP v4アドレスを入力してください。
• チェック：
  これは必須フィールドです。
• validate-select：
  オプションを選択してください。
• ipv6：
  有効なIP v6アドレスを入力してください。
• 時間：
  00 : 00〜23 : 59の有効な時間を入力してください
• validate-number：
  このフィールドに有効な番号を入力してください。
• validate-phoneLax：
  有効な電話番号を入力してください。例：（123）456-7890または123-456-7890
• dateITA：
  正しい日付を入力してください
• validate-xml-identifier：
  有効なXML識別子を入力してください（例：something_1、block5、id-4）。
• validate-clean-url：
  有効なURLを入力してください。たとえば、http：//www.example.comまたはwww.example.com。
• validate-admin-password：
  数字とアルファベットの両方を使用して、7文字以上を入力してください。
• validate-no-html-tags：
  HTMLタグは許可されていません。
• validate-integer：
  このフィールドに有効な整数を入力してください。
• validate-data：
  このフィールドでは、文字（azまたはAZ）、数字（0-9）、またはアンダースコア（_）のみを使用してください。最初の文字は文字である必要があります。
• validate-cc-ukss：
  スイッチ/ソロカードタイプの発行番号または開始日を入力してください。
• 最小単語：
  少なくとも{0}単語を入力してください。
• 英数字：
  文字、数字、スペース、またはアンダースコアのみを使用してください
• validate-identifier：
  有効なURLキーを入力してください（例： "example-page"、 "example-page.html"、または "anotherlevel / example-page"）。
• validate-street：
  このフィールドには、文字（azまたはAZ）、数字（0-9）、スペース、および「＃」のみを使用してください。
• validate-zip-international：
  有効な郵便番号を入力してください。
• validate-date：
  有効な日付を入力してください。
• validate-greater-great-zero：
  このフィールドには0より大きい数値を入力してください。
• validate-digits：
  このフィールドに有効な番号を入力してください。
• validate-ssn：
  有効な社会保障番号を入力してください（例：123-45-6789）。
• not-negative-amount：
  このフィールドに正数を入力してください。
• validate-max-size：
  アップロードしようとしているファイルが最大ファイルサイズ制限を超えています。
• validate-fax：
  有効なFAX番号を入力してください（例：123-456-7890）。
• validate-if-tag-script-exist：
  SRC属性または適切なコンテンツでタグSCRIPTを使用して、ドキュメントにJavaScriptを含めてください。
• min_text_length：
  {0}個以上の記号を入力してください。
• validate-date-au
  ：dd / mm / yyyyの日付形式を使用してください。たとえば、2006年3月17日の17/03/2006。
• mobileUK：
  有効な携帯電話番号を指定してください
• letters-with-basic-punc：
  文字または句読点のみを使用してください
• validate-number-range：
  値が指定された範囲内にありません。
• phoneUS：
  有効な電話番号を指定してください
• date_range_max：
  日付が指定された範囲内にありません。
• validate-range：
  値は指定された範囲内にありません。
• vinUS：
  指定された車両識別番号（VIN）は無効です。
• 範囲の単語：
  {0}〜{1}単語を入力してください。
• validate-zip-us：
  有効な郵便番号を入力してください（例：90602または90602-1234）。
• validate-emails：
  有効なメールアドレスをコンマで区切って入力してください。たとえば、johndoe @ domain.com、johnsmith @ domain.com。
• validate-css-length：
  有効なCSS-lengthを入力してください（例：100px、77pt、20em、.5exまたは50％）。
• zip-range：郵便
  番号は902xx-xxxxから905-xx-xxxxの範囲でなければなりません
• validate-phoneStrict：
  有効な電話番号を入力してください。例：（123）456-7890または123-456-7890
• dateNL：
  ゲルディゲ基準線
• 手紙のみ：
  手紙のみください
• max_text_length：
  {0}以下の記号を入力してください。
• validate-not-negative-number：
  このフィールドには0以上の数字を入力してください。
• ページごとの値リストの検証：
  有効な値を入力してください。例：10,20,30
• 空白
  なし：空白を入れないでください
• validate-state：
  都道府県を選択してください。
• validate-url：
  有効なURLを入力してください。プロトコルが必要です（http：//、https：//またはftp：//）。
• date_range_min：
  日付が指定された範囲内にありません。
• validate-digits-range：
  値が指定された範囲内にありません。
• 次より大きい：
  {0}以上の値を入力してください。
• validate-no-empty：
  空の値。
• validate-zero-or-greater：
  このフィールドには0以上の数値を入力してください。
• validate-cc-number：
  有効なクレジットカード番号を入力してください。
• validate-emailSender：
  有効なメールアドレスを入力してください（例：johndoe@domain.com）。
• validate-new-password：
  6文字以上を入力してください。先頭と末尾のスペースは無視されます。
• validate-customer-password：
  このフィールドの最小長は％1シンボル以上である必要があります。先頭と末尾のスペースは無視されます。
• validate-password：
  6文字以上を入力してください。先頭と末尾のスペースは無視されます。
• less-than-equals-to：
  {0}以下の値を入力してください。
• validate-currency-dollar：
  有効な$金額を入力してください。たとえば、100.00ドル。
• time12h：
  午前00:00から午後12:00までの有効な時間を入力してください
• validate-alphanum：
  このフィールドには文字（azまたはAZ）または数字（0-9）のみを使用してください。スペースやその他の文字は使用できません。
• validate-item-quantity：
  このファイル拡張子タイプを認識またはサポートしていません。
• validate-code：
  このフィールドには文字（az）、数字（0-9）、または下線（_）のみを使用してください。最初の文字は文字である必要があります。
• email2：
  有効なクレジットカード番号を入力してください。
• max-words：
  {0}ワード以下を入力してください。
• stripped-min-length：
  少なくとも{0}文字を入力してください
• validate-alpha：
  このフィールドには文字（azまたはAZ）のみを使用してください。
• パターン：
  無効な形式。
• 整数：
  正または負の非10進数でお願いします

スクリプト：

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

/ customer / account / createページを参照すると、フォームの下に次のコードが表示されます。

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

また、フォームの入力属性を確認すると、Magento 1のようなclass属性値と新しいdata-validate属性を確認できます。これがステップアップの基礎になります。

検証用のキーファイル：

• 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

UIコンポーネントを使用してフォームを作成する場合、以下のような検証を使用できます。Magento2.1.xで動作しますが、他のバージョンではまだテストしていません。

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

注意してください検証我々は追加することができ、それには、項目を検証ルールなどrequired-entry、validate-integerなど

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

あなたはファイルで見つけることができるすべての検証ルールvendor/magento/module-ui/view/base/web/js/lib/validation/rules.jsなどvalidate-date、validate-emailsなど

Magento2フォーム検証にも同じ要件があり、このコードを実行しました

最初にテストフォームをセットアップします

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

Magento2フォーム検証のJavaScript検証を有効にするには

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

リファレンス :: http://www.onlinecode.org/magento2-form-validation-example/

「ホワイトスペースなし」オプションは正しく動作しません（少なくともMagento 2.1では）。任意のタイプの「スペース」文字でエラーメッセージをトリガーします。値「test me」と「test me」は同じエラーを返します。