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>

希望这可以帮助。谢谢。

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论