Câu trả lời:
Bạn có thể thêm lớp để xác thực trong Magento 2. Xem ví dụ dưới đây. Có gần 72 quy tắc (lớp xác nhận) bạn có thể sử dụng:
$fieldset->addField(
'email_from',
'text',
['name' => 'email_from', 'label' => __('Email From'), 'title' => __('Email From'), 'required' => true, 'class' => 'validate-email']
);Xem blog để biết danh sách các quy tắc có sẵn để biết thêm thông tin:
Dưới đây là danh sách các quy tắc lớp xác nhận được hỗ trợ bởi magento 2. Bạn chỉ cần thêm lớp css cho quy tắc để áp dụng.
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
Có 3 cách khác nhau để sử dụng xác thực mẫu trong magento 2
Để kích hoạt xác thực javascript, hãy sử dụng mã sau trong mẫu của bạn
<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>* biểu mẫu tùy chỉnh là id biểu mẫu, bạn có thể thay thế nó bằng id biểu mẫu của bạn
Danh sách các quy tắc xác nhận mẫu
Để kết thúc bài viết này, một danh sách các tên quy tắc xác thực được cung cấp ở đây dưới dạng tài liệu tham khảo nhanh về tài liệu chính thức:
Quy tắc 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-classNameQuy tắc jQuery:
required,
remote,
email,
url,
date,
dateISO,
number,
digits,
creditcard,
equalTo,
maxlength,
minlength,
rangelength,
range,
max,
mintham khảo http://inchoo.net/magento-2/validate-custom-form-in-magento-2/
Trong các thành phần UI, nó có thể được sử dụng bằng cách cấu hình mẫu sau (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>Xem thêm ví dụ trong tập tin:
vendor/magento/module-cms/view/adminhtml/ui_component/cms_page_form.xml
Danh sách trình xác nhận trong Thành phần giao diện người dùng có thể được tìm thấy trong vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js.
Chỉ cần viết tập lệnh này để lấy tất cả các khóa có thông báo lỗi để giải thích:
Kịch bản:
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]}"
doneNếu bạn tham khảo trang / khách hàng / tài khoản / tạo trang, bạn có thể thấy đoạn mã sau bên dưới biểu mẫu:
<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>Và nếu bạn kiểm tra các thuộc tính đầu vào của biểu mẫu, bạn có thể thấy classcác giá trị thuộc tính giống như Magento 1 cùng với data-validatethuộc tính mới . Đây có thể là cơ sở để bước lên.
Các tệp khóa để xác thực:
Khi sử dụng các thành phần UI để tạo biểu mẫu, chúng ta có thể sử dụng xác nhận như bên dưới, nó hoạt động trong Magento 2.1.x, tôi chưa thử nghiệm nó trong phiên bản khác.
<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>Lưu ý mục xác thực , trong đó chúng ta có thể thêm các quy tắc xác thực , như required-entry, validate-integerv.v.
<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>Tất cả các quy tắc xác thực bạn có thể tìm thấy trong tệp vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js, như validate-date, validate-emailsv.v.
Tôi có cùng yêu cầu đối với Xác thực mẫu Magento2 và tôi đã thực hiện mã này
Đầu tiên chúng tôi sẽ thiết lập một mẫu thử nghiệm
<!-- 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>Để bật xác thực javascript cho Xác thực mẫu Magento2
<!-- enable javascript validation for custom-form-id -->
<script type="text/x-magento-init">
{
"#custom-form-id": {
"validation": {}
}
}
</script>Tham khảo :: http://www.onlinecode.org/magento2-form-validation-example/
Tùy chọn "không có khoảng trắng" không hoạt động chính xác (ít nhất là trên Magento 2.1). Nó kích hoạt một thông báo lỗi trên bất kỳ loại ký tự "khoảng trắng" nào. Các giá trị "kiểm tra tôi" và "kiểm tra tôi" sẽ trả về cùng một lỗi.