本文介绍如何将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>希望这可以帮助。谢谢。
