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