在这篇博客中,我们将看到如何在magento2中进行表单验证。

让我们看看使用表单验证的不同方法

首先,我们设置一个测试表单

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

data-validate是验证的属性,使用javascript验证

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

或者

<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”)”,您可以在其中查看选项。