了解 Magento 表单验证

已发表: 2021-05-31

目录

在我们今天的文章中，我们将了解 Magento 2 中的表单验证，以及如何在 Magento 商店中最好地实现表单验证。

表单验证模块

在 Magento 中，有三个主要的表单验证模块，它们基于并扩展了 jQuery 验证。

  • /lib/web/jquery/jquery.validate.js ：基础 jQuery 验证
  • /lib/web/mage/validation.js : 包括基本的 jQuery 验证和附加功能，例如可用于添加自定义验证规则的$.validator.addMethod
  • /lib/web/mage/validation/validation.js ：包括mage/validation.js并为验证器添加更多规则

表单验证规则

默认情况下，Magento 中的可用规则存储在/validation/rules.js中。 但是，这并不是您可以使用的所有规则。 由于表单验证的主要模块都是基于 jQuery，您可以使用 jQuery 内置的验证方法。

操作方法

创建自定义规则

如上所述，您可以通过为mage/validation模块创建 JavaScript mixin 并调用$.validator.addMethod来创建自定义规则，如下所示： 

 $.validator.addMethod(
  '规则名称',
  函数（值，元素）{
    // 验证规则检查后返回真或假
  },
  $.mage.__('验证失败时显示的错误信息')
)

下面的代码将在 mixin 中添加一个验证规则，以检查输入字段是否只有五个单词。

 供应商/模块/视图/前端/requirejs-config.js 
 变量配置 = {
  配置：{
    混合：{
      “法师/验证”：{
        'Vendor_Module/js/validation-mixin'：真
      }
    }
  }
}
 供应商/模块/视图/前端/web/js/validation-mixin.js 
 定义（['jquery']，函数（$）{
  '使用严格';

  返回函数（）{
    $.validator.addMethod(
      '验证五个字'，
      函数（值，元素）{
        返回值.split('').length == 5;
      },
      $.mage.__('请准确输入五个字')
    )
  }
});

修改现有的验证消息

当您只需要修改现有的验证消息而不更改验证规则时，消息对象可能会派上用场。

例如，在下面的代码中： 

 $('#form-to-validate').mage('验证', {
    消息：{
        “输入名称”：{
            'validation-rule-1': '验证消息 1',
            'validation-rule-2': '验证消息 2',
        },
    }
});

input-name是对象的键，它的值是一个验证规则列表。 这些验证规则将验证消息作为其值，您可以根据自己的喜好自由修改。

创建自定义表单验证

使用mage/validation库，您可以在将它们提交到服务器之前创建自定义表单验证。

第 1 步：启动验证

您可以使用两种方法来启动表单验证：

使用data-mage-init属性
 <form data-mage-init='{"validation": {}}'>
    ...
</form>
使用text/x-magento-init脚本类型标签
 <script type="text/x-magento-init">
    {
        “#my-form”：{
            “验证”： {}
        }
    }
</脚本>

步骤 2：为表单字段定义验证规则

Magento 有多种方法可以定义表单验证规则

作为属性
 <input ... required="true"/>
作为带参数的属性
 <input ... required="true" minlength="15"/>
作为类名
 <input ... class="input-text required-entry"/>
作为带参数的类名
 <input ... class="input-text required-entry" minlength="15"/>
作为data-validate属性： 
 <input ... data-validate='{"required":true}'/>
作为带有参数的data-validate属性
 <input ... data-validate='{"required":true, "minlength":10}'/>
使用data-mage-init 
 <form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true}}}}'>
    ...
</form>
使用带参数data-mage-init 
 <form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true, "minlength":20}}}}'>
    ...
</form>

例子

在这里，我们将尝试创建表单字段，以及使用不同验证方法为每个字段创建验证表单。 

 <form class="form" method="post" data-mage-init='{"validation":{"rules": {"field-4": {"required":true}}}}'>
    <fieldset class="fieldset">
        <div class="必填字段名">
            <label class="label" for="field-1"><span>字段 1（使用数据验证）</span></label>
            <div class="控制">
                <input name="field-1" title="Field 1" value="" class="input-text" type="text" data-validate='{"required":true, "url": true}' />
            </div>
        </div>
        <div class="必填字段名">
            <label class="label" for="field-2"><span>字段 2（使用属性）</span></label>
            <div class="控制">
                <input name="field-2" title="字段 2" value="" class="input-text" type="text" required="true"/>
            </div>
        </div>
        <div class="必填字段名">
            <label class="label" for="field-3"><span>字段 3（使用类名）</span></label>
            <div class="控制">
                <input name="field-3" title="Field 3" value="" type="text" class="input-text required-entry"/>
            </div>
        </div>
        <div class="必填字段名">
            <label class="label" for="field-4"><span>字段 4（使用 data-mage-init）</span></label>
            <div class="控制">
                <input name="field-4" title="字段 4" value="" class="input-text" type="text"/>
            </div>
        </div>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <button type="submit" title="Submit" class="action submit primary">
                <span>提交</span>
            </按钮>
        </div>
    </div>
</form>

使用上述字段和表单验证，您的结果应如下所示：

Magento 2 中的表单验证