Magento 2：自定义表单验证

本文介绍如何将Javascript表单验证添加到为Magento 2中的任何自定义模块制作的任何自定义表单。

我将显示一个简单的表单，其中包含名字，姓氏和电子邮件字段。

我们将以以下形式应用两个验证规则：

–必需的条目验证
–电子邮件验证

根据您的需要，还有许多其他验证规则可用。它存在于文件中：lib / web / mage / validation.js

该JS文件中存在的一些验证规则是：

datetime-validation
validate-new-password
validate-cc-number
validate-date
validate-url
validate-password
…
等等...

要验证表单，您需要添加两件事：

1）在输入类型中添加一些内容，使其成为必填字段
2）在文件末尾添加javascript代码

1）在输入类型字段中添加一些内容，使其成为必填字段

我将显示三种根据需要输入字段的方法：

a）添加类别=必填

<input type="text" id="firstname" name="firstname" value="" title="First Name" class="input-text required" autocomplete="off" >

b）添加必需的属性= true

<input type="text" id="lastname" name="lastname" value="" title="Last Name" class="input-text" required="true" autocomplete="off" >

c）添加数据验证属性

<input type="email" name="email" autocomplete="email" id="email_address" value="" title="Email" class="input-text" data-validate="{required:true, 'validate-email':true}" >

2）在文件末尾添加javascript代码

我们可以在表单关闭标签后添加以下两个JavaScript代码中的任何一个：

注意：“ form-validate”是表单的ID。

a）第一个Javascript

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

b）第二个Javascript

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

这是完整的示例代码：

<form class="form create account form-create-account" action="<?= $block->escapeUrl($block->getPostActionUrl()) ?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off">
    <?= /* @noEscape */ $block->getBlockHtml('formkey'); ?>
    
    <fieldset class="fieldset create info">
        <legend class="legend"><span>Personal Information</span></legend><br>
        <input type="hidden" name="success_url" value="">
        <input type="hidden" name="error_url" value="">
        
        <div class="field field-name-firstname required">
            <label class="label" for="firstname">
                <span>First Name</span>
            </label>
 
            <div class="control">
                <input type="text" id="firstname" name="firstname" value="" title="First Name" class="input-text required" autocomplete="off" >
            </div>
        </div>
        <div class="field field-name-lastname required">
            <label class="label" for="lastname">
                <span>Last Name</span>
            </label>
 
            <div class="control">
                <input type="text" id="lastname" name="lastname" value="" title="Last Name" class="input-text" required="true" autocomplete="off" >
            </div>
        </div>
 
        <div class="field required">
            <label for="email_address" class="label">
                <span>Email</span>
            </label>
 
            <div class="control">
                <input type="email" name="email" autocomplete="email" id="email_address" value="" title="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="<?= $block->escapeHtmlAttr(__('Submit')) ?>"><span><?= $block->escapeHtml(__('Submit')) ?></span></button>
        </div>
    </div>
 
</form>
 
<script>
/*require([
    'jquery',
    'mage/mage'
], function($){
    var dataForm = $('#form-validate');
    dataForm.mage('validation', {});
});*/
</script>
 
<script type="text/x-magento-init">
{
    "#form-validate": {
        "validation": {}
    }
}
</script>

希望这可以帮助。谢谢。