任何Web应用程序的大多数部分之一是数据交换。因此,数据必须有效并且定义明确。验证Magento表单字段是此处的关键点。
基本上,有两种类型的验证,即客户端和服务器端验证。客户端验证总是在提供更好的用户体验(UX)的意义上,因此用户不必仅仅因为表单中的值无效而提交和重新加载页面 – 它使事情变得更加动态。在本地编辑页面源是非常简单的,以便禁用或绕过最复杂的JS验证。
如果您不进行服务器端验证,用户可以做些什么?
应始终在服务器端执行验证 – 您永远不能信任客户端验证。
因此,服务器端验证是数据的实际验证。如果AJAX在游戏中,则它是不同的 – 它允许您节省带宽以及在提交之前向用户提供反馈。最后,如果您正在构建严格的客户端,点对点交换应用程序(想想游戏),您将需要客户端验证来防止客户作弊。在本文中,我们将使用jQuery远程方法讨论服务器端表单字段验证。
现在的问题是什么是jQuery远程验证?
基本上,它是一种可以进行远程服务器调用以便验证表单字段而不将整个表单发布到服务器的机制。当您有一个无法在客户端上验证的字段时,这很有用,因此在提交表单时可能无法通过验证。
如何在Magento 2中集成jQuery远程验证?
让我们考虑一个场景,我正在开发一个自定义表单,其中包含用户名和电子邮件,需要在服务器端进行验证以检查电子邮件是否存在。如何将jQuery的远程方法应用于Magento 2表单?所以我们需要ajax调用和控制器的基本思想,其中ajax调用命中服务器来处理请求。
步骤1.为表单创建表单元素.
1 2 3 4 5 | <div class="form-group"> <label>Email</label> <input class="form-control" name="email" type="email" data-validate="{required:true, 'validate-email':true, 'remote':'<?php echo $this->getUrl('registration/index/validate', ['_secure' => true]); ?>'}" /> </div> |
步骤2.在服务器端创建控制器和进程验证
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | ?php namespace Company\Registration\Controller\Index; use Magento\Framework\App\Action\Action; class Validate extends Action { /** * @var \Magento\Framework\Controller\Result\JsonFactory */ protected $resultJsonFactory; /** * @var \Magento\Customer\Model\Customer */ protected $_customerModel; /** * @param \Magento\Framework\App\Action\Context $context * @param \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory */ public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory, \Magento\Customer\Model\Customer $customerModel ) { $this->resultJsonFactory = $resultJsonFactory; $this->_customerModel = $customerModel; parent::__construct($context); } public function execute() { $resultJson = $this->resultJsonFactory->create(); $email = $this->getRequest()->getParam('email'); $customerData = $this->_customerModel->getCollection() ->addFieldToFilter('email', $email); if(!count($customerData)) { $resultJson->setData('true'); } else { $resultJson->setData('That email is already taken, try another one'); } return $resultJson; } } |
步骤3。提交表单后,您将收到这样的错误消息
当你输出email表单里面时:maidn.kdifl@jifdsi 会出现错误 : That email is already taken, try another one
结论
在这里,我们通过简单的方法来验证服务器端的单个表单元素。我们只是添加一个属性而不是编写一个完整的ajax函数,没有任何麻烦的Javascript / jQuery错误并节省我们的一天。通过这种方法,我们可以减少流量和有效负载,以便在大量并发用户发布数据时验证表单。