如何在 Magento 2 中验证表单的完整指南

redmaomail 2024-07-24 18:18 阅读数 60 #Magento

Magento 应用程序提供了多种验证表单输入的方法。在本文中，我将向您展示如何使用 javascript 在 Magento 2 中验证表单。

要向表单添加验证，您需要启动验证

有几种方法可以启动表单验证：
- 使用 data-mage-init 属性

< form id = "my-form" data - mage - init = '{"validation": {}}' > 
    ... 
< / form >

- 使用 text/x-magento-init 脚本类型标签

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

将验证规则应用于您的输入字段

在您的自定义表单中，您可以使用此处列出的以下方法之一为您的字段设置验证规则：
- 方法 #1：使用“data-validate”属性

<input id="field-name" type="text" data-validate='{"required":true}'/

- 方法#2：使用规则名称作为属性

<input id="field-1" ... required="true"/>

- 方法#3：使用规则名作为类名

<input id="field-1" ... class="input-text required-entry"/>

- 方法#4：在表单标签的 data-mage-init 属性中设置规则

<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true}}}}'> 
    ... 
</form>

一些表单验证规则列表

验证密码
字母数字
仅限字母
无空格
最大字数
确认电邮
验证网址
验证数字
验证范围
验证标识符
仅限字母
字母数字
无空格
电话美国
英国电话
等等，...
您可以在文件中检查这些所有验证逻辑：lib/web/mage/validation.js

示例
我们创建一个自定义表单并为表单字段添加验证。在这个表单中，我们使用“data-mage-init”属性来启动表单验证。

<form class="form" id="custom-form" method="post" autocomplete="off" data-mage-init='{"validation": {}}'>
   <fieldset class="fieldset">
       <legend class="legend">
        <span>Form Information</span>
       </legend>
       <div class="field required">
           <label for="email_address" class="label">
           <span>Email</span>
           </label>
       <div class="control">
            <input type="email" name="email" id="email" value=" "  title="Email"       data-validate="{required:true,  'validate-email':true}">
        </div>
       </div>
       <div class="field name required">
           <label class="label" for="name"><span>Name</span></label>
           <div class="control">
               <input name="name" id="field-2" title="Name" value="" class="input-text" type="text" data-validate="{required:true}"/>
           </div>
       </div>
   </fieldset>
   <div class="actions-toolbar">
       <div class="primary">
           <button type="submit" class="action submit primary" title="Submit"><span>Submit</span></button>
       </div>
   </div>
</form>

因此，我们已经学习了如何使用 javascript 和 Magento 2 的 validation.js 库来验证表单。希望这篇文章可以帮助您解决您的问题。

分享到：

上一篇：如何在 Magento 2 中获取和设置 cookie 下一篇：如何在 Magento 2 中使用 Modal 小部件创建弹出窗口

Arabic	Hebrew	Polish
Bulgarian	Hindi	Portuguese
Catalan	Hmong Daw	Romanian
Chinese Simplified	Hungarian	Russian
Chinese Traditional	Indonesian	Slovak
Czech	Italian	Slovenian
Danish	Japanese	Spanish
Dutch	Klingon	Swedish
English	Korean	Thai
Estonian	Latvian	Turkish
Finnish	Lithuanian	Ukrainian
French	Malay	Urdu
German	Maltese	Vietnamese
Greek	Norwegian	Welsh
Haitian Creole	Persian