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