태그 보관물: form-validation

form-validation

마 젠토 2-양식 검증 검사 속성에 대한 개요가

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 가지가 있습니다

자바 스크립트 유효성 검사를 활성화하려면 템플릿에서 다음 코드를 사용하십시오.

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

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

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

});
</script>

* custom-form은 양식 ID이며 양식 ID로 바꿀 수 있습니다

양식 유효성 검사 규칙 목록

이 기사를 마무리하기 위해 공식 문서에 대한 빠른 참조로 유효성 검사 규칙 이름 목록이 제공됩니다.

마 젠토 규칙 :

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.

설명을 위해 오류 메시지와 함께 모든 키를 가져 오기 위해이 스크립트를 작성했습니다.

  • 필수 입력 :
    필수 필드입니다.
  • 공백이있는 알파벳 확인 :
    이 필드에는 문자 (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 :
    유효한 우편 번호를 입력하십시오.
  • 유효 날짜 :
    유효한 날짜를 입력하십시오.
  • 0보다 큰 검증 :
    이 필드에 0보다 큰 숫자를 입력하십시오.
  • 유효 숫자 :
    이 필드에 유효한 숫자를 입력하십시오.
  • validate-ssn :
    유효한 주민등록번호를 입력하십시오 (예 : 123-45-6789).
  • 음수가 아님 :
    이 필드에 양수를 입력하십시오.
  • validate-max-size :
    업로드하려는 파일이 최대 파일 크기 제한을 초과합니다.
  • validate-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 :
    유효한 휴대 전화 번호를 지정하십시오
  • 기본-펑크
    문자 : 문자 또는 문장 부호 만 사용하십시오
  • validate-number-range :
    값이 지정된 범위 내에 있지 않습니다.
  • phoneUS :
    유효한 전화 번호를 지정하십시오
  • date_range_max :
    날짜가 지정된 범위 내에 있지 않습니다.
  • validate-range :
    값이 지정된 범위 내에 있지 않습니다.
  • vinUS :
    지정된 차량 식별 번호 (VIN)가 유효하지 않습니다.
  • 범위 단어 :
    {0}과 {1} 단어 사이에 입력하십시오.
  • validate-zip-us :
    유효한 우편 번호를 입력하십시오 (예 : 90602 또는 90602-1234).
  • 검증 – 전자 우편 :
    쉼표로 구분 유효한 이메일 주소를 입력 해주세요. 예를 들어, johndoe@domain.com, johnsmith@domain.com입니다.
  • validate-css-length :
    유효한 CSS 길이를 입력하십시오 (예 : 100px, 77pt, 20em, .5ex 또는 50 %).
  • 우편 번호 범위 :
    우편 번호는 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}보다 크거나 같은 값을 입력하십시오.
  • 비어 있지 않음 :
    빈 값.
  • 0 이상 검증 :
    이 필드에 0 이상의 숫자를 입력하십시오.
  • validate-cc-number :
    유효한 신용 카드 번호를 입력하십시오.
  • validate-emailSender :
    유효한 이메일 주소를 입력하십시오 (예 : johndoe@domain.com).
  • validate-new-password :
    6 자 이상을 입력하십시오. 선행 및 후행 공백은 무시됩니다.
  • validate-customer-password :
    이 필드의 최소 길이는 % 1 기호 이상이어야합니다. 선행 및 후행 공백은 무시됩니다.
  • validate-password :
    6 자 이상을 입력하십시오. 선행 및 후행 공백은 무시됩니다.
  • 덜-같습니다보다에 :
    보다 적은 값을 입력하거나 {0}에 동일 해주십시오.
  • validate-currency-dollar :
    유효한 $ 금액을 입력하십시오. 예를 들어 $ 100.00입니다.
  • time12h :
    00:00 am ~ 12:00 pm 사이에 유효한 시간을 입력하십시오
  • validate-alphanum :
    이 필드에는 문자 (az 또는 AZ) 또는 숫자 (0-9) 만 사용하십시오. 공백이나 다른 문자는 허용되지 않습니다.
  • validate-item-quantity :
    이 파일 확장자 유형을 인식하거나 지원하지 않습니다.
  • validate-code :
    이 필드에는 문자 (az), 숫자 (0-9) 또는 밑줄 (_) 만 사용하십시오. 첫 문자는 문자 여야합니다.
  • email2 :
    유효한 신용 카드 번호를 입력하십시오.
  • 최대 단어 :
    {0} 단어 이하를 입력하십시오.
  • 최소 길이 :
    최소 {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>

그리고 폼의 입력 속성을 확인하면 class새로운 data-validate속성 과 함께 속성 값과 같은 마 젠토 1을 볼 수 있습니다 . 이것은 강화의 기초가 될 수 있습니다.

유효성 검사를위한 키 파일 :


답변

UI 구성 요소 를 사용하여 양식을 만들 때 아래와 같은 유효성 검사를 사용할 수 있습니다 .Magento 2.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 Validation에 동일한 요구 사항이 있으며이 코드를 수행했습니다.

먼저 테스트 양식을 설정합니다

<!-- 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”값은 동일한 오류를 반환합니다.