Magento 2-表单验证

32

Magento 2中的新表单验证属性是否有概述？

magento2 form-validation

— 类MP
source

37

您可以在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

— 尼肯·甘地
source

2

有没有示例如何使用模式？tnx

— Antonio Pedicini

35

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

*自定义表单是表单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/

— 瓦哈夫·阿哈尔帕拉（Vaibhav Ahalpara）
source

我想在magento 2中应用服务器端验证，您能和我分享任何链接或文档

— 吗？

我想您已经在这里问过了问题magento.stackexchange.com/questions/161300/…此链接是否可以帮助其他

— Vaibhav Ahalpara

9

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

只需编写此脚本即可获取所有带有错误消息的键，以进行说明：

必填项：
这是必填字段。
validate-alphanum-with-spaces：
请仅在此字段中使用字母（az或AZ），数字（0-9）或空格。
phoneUK：
请指定一个有效的电话号码
验证电子邮件：
请输入有效的电子邮件地址（例如：johndoe@domain.com）。
ipv4：
请输入有效的IP v4地址。
已检查：
这是必填字段。
验证选择：
请选择一个选项。
ipv6：
请输入有效的IP v6地址。
时间：
请输入一个介于00:00和23:59之间的有效时间
验证编号：
请在此字段中输入有效的数字。
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”或“ otherlevel / example-page”）。
validate-street：
请在此字段中仅使用字母（az或AZ），数字（0-9），空格和“＃”。
validate-zip-international：
请输入有效的邮政编码。
验证日期：
请输入有效日期。
验证大于零：
请在此字段中输入一个大于0的数字。
验证数字：
请在此字段中输入有效的数字。
validate-ssn：
请输入有效的社会保险号（例如：123-45-6789）。
非负数：
请在此字段中输入正数。
validate-max-size：
您尝试上传的文件超过了最大文件大小限制。
validate-fax：
请输入有效的传真号码（例如：123-456-7890）。
验证是否存在标签脚本：
请使用带有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）。
validate-emails：
请输入有效的电子邮件地址，以逗号分隔。例如，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：
Vul hiereen geldige数据。
仅字母：
请仅字母
max_text_length：
请输入小于或等于{0}个符号。
validate-not-negative-number：
请在此字段中输入0或更大的数字。
validate-per-page-value-list：
请输入有效值，例如：10,20,30
没有空格：
请没有空格
validate-state：
请选择州/省。
validate-url：
请输入有效的URL。协议是必需的（http：//，https：//或ftp：//）。
date_range_min：
日期不在指定范围内。
validate-digits-range：
该值不在指定范围内。
大于等于：
请输入一个大于或等于{0}的值。
validate-no-empty：
空值。
验证零或更大：
请在此字段中输入数字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：
我们不识别或支持此文件扩展名类型。
验证码：
请在此字段中仅使用字母（az），数字（0-9）或下划线（_），并且第一个字符应为字母。
email2：
请输入有效的信用卡号。
max-words：
请输入{0}个或更少的单词。
最小长度：
请至少输入{0}个字符
validate-alpha：
在此字段中只能使用字母（az或AZ）。
模式：
无效的格式。
整数：请
为正或负的非十进制数

剧本：

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

— 柯比
source

3

如果您参考/ 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属性。这可以作为加强的基础。

验证密钥文件：

— 法师
source

谢谢。我也找到了新的属性data-validate，但是有趣的是有哪些可用的验证。以我

— 为例，

我想在magento 2中应用服务器端验证，可以与我分享任何链接或文档吗？

— Khushbu_sipl

2

当使用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>

您可以在file中找到的所有验证规则vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js，例如validate-date，validate-emails等等。

— 关键商
source

1

我对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/

— 达瓦尔·戴夫（Dhaval Dave）
source

0

“ no-whitespace”选项无法正常工作（至少在Magento 2.1上有效）。它会在任何类型的“空格”字符上触发错误消息。值“ test me”和“ test me”将返回相同的错误。

— 斯坦尼斯拉夫·斯普扎亚克
source