Magento 2 如何在 Keyup 事件上验证客户注册表

Question

我正在从事一个项目，我需要将客户注册表验证为客户类型。我想使用事件键进行输入。我也想更改默认消息。现在我正在做如下验证

$("#firstname").keyup(function(){
    $('input[name="firstname"]').validation();
    if(!$('input[name="firstname"]').validation('isValid')){
        $("#firstname-error").remove();
        $("#firstname").after('<div for="firstname" generated="true" class="mage-error" id="firstname-error">Please enter your firstname</div>');
    }else{
        $("#firstname-error").remove();
    }
});

我认为这不是一个好方法。但我需要为所有领域执行此操作。然后我正在查看这个文件供应商\magento\magento2-base\lib\web\mage\validation.js在大约第 1735 行我看到了下面的代码

$.widget('mage.validation', {
        options: {
            meta: 'validate',
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            ignoreTitle: true,
            errorClass: 'mage-error',
            errorElement: 'div',
    ...

看到这里，我想也许有更好的方法可以做到这一点。因此，如果有任何简单的方法，请告诉我。

Answer 1

经过一番挖掘，我想出了这个解决方案。对于解决方案，您需要做的就是使用 requirejs-config.js 添加新的 js。但是我创建了一个新模块。模块文件如下。

appcodeVkyCoreregistration.php

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Vky_Core',
    __DIR__
);

appcodeVkyCoreetcmodule.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vky_Core" setup_version="0.0.1"/>
</config>

appcodeVkyCoreviewfrontendrequirejs-config.js

var config = {
    map: {
        '*': {
            vky_customjs:      'Vky_Core/js/vky_custom'
        }
    }
};

appcodeVkyCoreviewfrontendwebjsvky_custom.js

define([
    "jquery",
    "jquery/ui",
    'mage/validation'
], function($) {
    "use strict";
    console.log('vky_custom.js is loaded!!');
        //creating jquery widget
        $.widget('vky_custom.js', {
            _create: function() {
                this._bind();
            },
            /**
             * Event binding, will monitor change, keyup and paste events.
             * @private
             */
            _bind: function () {
                this._on(this.element, {
                    'change': this.validateField,
                    'keyup': this.validateField,
                    'paste': this.validateField,
                    'click': this.validateField,
                    'focusout': this.validateField,
                    'focusin': this.validateField,
                });
            },
            validateField: function () {
                $.validator.validateSingleElement(this.element);
            },
        });
    return $.vky_custom.js;
});

现在，无论您的register.phtml文件在哪里，都可以打开它。添加一些内容，如下所示。 在文件末尾添加此

<script type="text/x-magento-init">
    { ".v-validate": { "Vky_Core/js/vky_custom": {} } }
</script>

然后，例如，您要验证电子邮件。 查找电子邮件的输入标签并添加类v-validate。喜欢这个

<input type="email" name="email" autocomplete="email" id="email_address" value="<?= $block->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" class="input-text v-validate" data-validate="{required:true, 'validate-email':true}">

因此，任何带有类 v-validate 的输入都将在诸如键控、更改、单击、聚焦等事件上进行验证。我为所有输入标签添加了一个类。

对于此行上方register.phtml firstname和lastname，我var dataForm = $('#form-validate');添加了

$('#firstname').addClass('v-validate');
$('#lastname').addClass('v-validate');

这就是我为解决我的问题所做的一切。它有效。这就是为什么发布我的答案。也许这可以帮助某人。