文档 下载安装 问答 主机

Magento2 中的表单验证

在 Magento 2 中,提交表单之前的关键步骤是验证表单。如果你使用 Magento 2 平台搭建你的商城,将会使用validation.js 文件,它允许你注入新的表单验证,实际上,在 Magento 2 中使用 validation.js 文件有许多种实现表单验证的方法,所以,现在我们将一起探讨这个主题。

为了准备新的验证,我们需要创建一个测试表单

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

表单被创建,并具有了验证的属性。

下一步,运行以下脚本,接受来自 javascirpt 的验证:

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "validation": {}
        }
    }
</script>

或者,你可以直接在 .html 中操作,像这样:

<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">
or

<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){
 
   var dataForm = $('#custom-form');
   dataForm.mage('validation', {});
 
});
</script>

别忘了,用来输出的 javascript 库是:lib/web/mage/validation.js

根据这篇教程,你将会实现不同类型的验证方法,包括 validate-cc-cvn, validate-length, validate-one-required 和 组件类型 $.widget("mage.validation")

本教程翻译自Mageplaza模块开发系列,其他内容请点击下面链接: