本篇博客将介绍验证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