มีภาพรวมสำหรับคุณลักษณะการตรวจสอบความถูกต้องของฟอร์มใหม่ใน 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']
);ดูบล็อกสำหรับรายการกฎที่มีอยู่สำหรับข้อมูลเพิ่มเติม:
นี่คือรายการของกฎการตรวจสอบชั้นเรียนที่สนับสนุนโดยวีโอไอพี 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
มี 3 วิธีในการใช้การตรวจสอบความถูกต้องของแบบฟอร์มใน magento 2
หากต้องการเปิดใช้งานการตรวจสอบความถูกต้องของจาวาสคริปต์ให้ใช้รหัสต่อไปนี้ในเทมเพลตของคุณ
<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>* แบบฟอร์มที่กำหนดเองเป็นแบบฟอร์ม 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ได้
เพิ่งเขียนสคริปต์นี้เพื่อหยิบกุญแจทั้งหมดพร้อมข้อความแสดงข้อผิดพลาดเพื่ออธิบาย:
บท:
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หากคุณอ้างถึง / ลูกค้า / บัญชี / หน้าสร้างคุณสามารถดูรหัสต่อไปนี้ภายใต้แบบฟอร์ม:
<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แอตทริบิวต์ใหม่ นี่เป็นพื้นฐานของการก้าวขึ้น
ไฟล์คีย์สำหรับการตรวจสอบความถูกต้อง:
เมื่อใช้ส่วนประกอบ 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 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>เพื่อเปิดใช้งานการตรวจสอบ javascript สำหรับการตรวจสอบแบบฟอร์ม Magento2
<!-- 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/
ตัวเลือก "no-whitespace" ทำงานไม่ถูกต้อง (อย่างน้อยใน Magento 2.1) มันก่อให้เกิดข้อผิดพลาดในประเภทของ "ช่องว่าง" ตัวละคร ค่า "ทดสอบฉัน" และ "ทดสอบฉัน" จะส่งคืนข้อผิดพลาดเดียวกัน