Magento2 验证自定义表单

本篇博客将介绍验证Magento 2中任何表单的基本原理。

为了本文的目的，我们将使用并修改联系我们页面上的联系表单。表单本身可以在以下路径中找到，具体取决于您使用的安装类型：

• app/code/Magento/Contact/view/frontend/templates/form.phtml
• vendor/magento/module-contact/view/frontend/templates/form.phtml

为了演示如何验证表单，让我们创建一个包含一些字段的无验证表单。从上面的路径中复制其中一个并将其粘贴到您的主题中：

• app/code/VENDOR/THEME/Magento_Contact/frontend/templates/form.phtml

接下来，将以下代码粘贴到其中：

<form class="form contact-magease" action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>" id="contact-form" method="post" data-hasrequired="* Required Fields">
	<fieldset class="fieldset">
		<div class="field name required">
			<label class="label" for="field1"><span>Field 1 (using data-validate)</span></label>
			<div class="control">
                		<input name="field1" id="field1" title="Field 1" value="" class="input-text" type="text" />
			</div>
		</div>
	        <div class="field name required">
			<label class="label" for="field2"><span>Field 2 (using attribute)</span></label>
			<div class="control">
                		<input name="field2" id="field2" title="Field 2" value="" class="input-text" type="text" />
			</div>
		</div>
        	<div class="field name required">
            		<label class="label" for="field3"><span>Field 3 (using classname)</span></label>
            		<div class="control">
                		<input name="field3" id="field3" title="Field 2" value="" type="text" class="input-text" />
            		</div>
        	</div>
        	<div class="field name required">
            		<label class="label" for="field4"><span>Field 4 (using data-mage-init)</span></label>
            		<div class="control">
                		<input name="field4" id="field4" title="Field 4" value="" class="input-text" type="text" />
            		</div>
        	</div>
	        <?php echo $block->getChildHtml('form.additional.info'); ?>
	</fieldset>
	<div class="actions-toolbar">
	        <div class="primary">
            		<input type="hidden" name="hideit" id="hideit" value="" />
            		<button type="submit" title="Submit" class="action submit primary">
                		<span>Submit</span>
            		</button>
        	</div>
    	</div>
</form>

您的表单应如下所示：

如果单击“Submit”按钮，将提交表单。

第1步：添加验证组件

在表单标签上添加此属性：

data-mage-init='{"validation":{}}'

这个属性告诉Magento表单必须在提交之前进行验证，验证别名应该使用RequireJS调用某些特定文件。如果您查看编译后的文件RequireJS配置文件的页面源代码(可以在pub/static/frontend/VENDOR/THEME/LOCALE/ RequireJS -config.json中找到)，您应该能够找到以下代码片段:

var config = {
	map: {
		"*": {
			...
			"validation": "mage/validation/validation",
			...
		}
	}
	...
};

validation右侧的字符串与将加载整个验证逻辑并处理输入字段的lib/web/mage/validation/validation.js文件匹配。

第2步：在输入字段中添加一些验证规则

通过查看验证逻辑代码，Magento可以使用下面列出的方法来设置验证规则名称：

1. 方法＃1 - 通过data-validate在输入字段上设置属性：

   <input data-validate='{"required":true}'name="field1" id="field1" ... />

2. 方法＃2 - 通过将规则名称设置为属性：

   <input required="true" name="field2" id="field2" ... />

3. 方法＃3 - 通过将规则名称设置为class名：

   <input class="input-text required" name="field3" id="field3" ... />

4. 方法＃4 - 通过在表单标签上设置data-mage-init属性内的规则

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

现在，当您提交表单时，所有字段都应该是无效，如图像所示：

带参数的规则

如果必须使用需要带参数的规则（例如，minlength ，maxlength和许多其他参数），则可以使用以下三种方法之一：

• 方法＃1

  data-validate='{
  	"required":true,
  	"minlength":10
  }'

• 方法＃2

  required="true" minlength="15"

• 方法＃3 -  您必须手动指定应用规则的每个输入字段的名称属性（如果您将其与数据验证属性一起使用，则已经处理了该属性）

  data-mage-init='{
  	"validation":{
  		"rules": {
  			"field4": {
  				"required":true,
  				"minlength":20
  			}
  		}
  	}
  }'

表单验证规则列表

为了总结本文，这里提供了一个验证规则名称列表，作为对官方文档的快速参考：

1. jQuery 规则：
   1. required,
   2. remote,
   3. email,
   4. url,
   5. date,
   6. dateISO,
   7. number,
   8. digits,
   9. creditcard,
   10. equalTo,
   11. maxlength,
   12. minlength,
   13. rangelength,
   14. range,
   15. max,
   16. min
2. Magento 规则：
   1. max-words
   2. min-words
   3. range-words
   4. letters-with-basic-punc
   5. alphanumeric
   6. letters-only
   7. no-whitespace
   8. zip-range
   9. integer
   10. vinUS
   11. dateITA
   12. dateNL
   13. time
   14. time12h
   15. phoneUS
   16. phoneUK
   17. mobileUK
   18. stripped-min-length
   19. email2
   20. url2
   21. credit-card-types
   22. ipv4
   23. ipv6
   24. pattern
   25. allow-container-className
   26. validate-no-html-tags
   27. validate-select
   28. validate-no-empty
   29. validate-alphanum-with-spaces
   30. validate-data
   31. validate-street
   32. validate-phoneStrict
   33. validate-phoneLax
   34. validate-fax
   35. validate-email
   36. validate-emailSender
   37. validate-password
   38. validate-admin-password
   39. validate-customer-password
   40. validate-url
   41. validate-clean-url
   42. validate-xml-identifier
   43. validate-ssn
   44. validate-zip-us
   45. validate-date-au
   46. validate-currency-dollar
   47. validate-not-negative-number
   48. validate-zero-or-greater
   49. validate-greater-than-zero
   50. validate-css-length
   51. validate-number
   52. required-number
   53. validate-number-range
   54. validate-digits
   55. validate-digits-range
   56. validate-range
   57. validate-alpha
   58. validate-code
   59. validate-alphanum
   60. validate-date
   61. validate-date-range
   62. validate-cpassword
   63. validate-identifier
   64. validate-zip-international
   65. validate-one-required
   66. validate-state
   67. required-file
   68. validate-ajax-error
   69. validate-optional-datetime
   70. validate-required-datetime
   71. validate-one-required-by-name
   72. less-than-equals-to
   73. greater-than-equals-to
   74. validate-emails
   75. validate-cc-type-select
   76. validate-cc-number
   77. validate-cc-type
   78. validate-cc-exp
   79. validate-cc-cvn
   80. validate-cc-ukss
   81. validate-length
   82. required-entry
   83. not-negative-amount
   84. validate-per-page-value-list
   85. validate-per-page-value
   86. validate-new-password
   87. required-if-not-specified
   88. required-if-all-sku-empty-and-file-not-loaded
   89. required-if-specified
   90. required-number-if-specified
   91. datetime-validation
   92. required-text-swatch-entry
   93. required-visual-swatch-entry
   94. required-dropdown-attribute-entry
   95. Validate-item-quantity
   96. validate-grouped-qty
   97. validate-one-checkbox-required-by-name
   98. validate-date-between
   99. validate-dob