AEM 6.2文本字段触摸式用户界面验证_Aem

AEM 6.2文本字段触摸式用户界面验证

aem

AEM 6.2文本字段触摸式用户界面验证,aem,Aem,在AEM touch ui对话框中，我有一个文本字段。在该文本字段中，作者可以这样输入数据。[$]或{$}或$。现在，我的要求是验证开启和关闭支架是否相同。我的意思是，如果作者输入了[$]，那么我想验证[开始括号和]结束括号是否相同。我们将非常感谢任何指针。您可以使用基金会验证库进行此操作。这样，您就可以跨项目中的所有组件重用验证。像添加新属性这样简单的操作这已在AEM 6.3/6.4上进行了测试，但也应适用于6.2 这也适用于使用granite组件以及coral库创建的字段。根据要求的复杂性

在AEM touch ui对话框中，我有一个文本字段。在该文本字段中，作者可以这样输入数据。[$]或{$}或$。现在，我的要求是验证开启和关闭支架是否相同。我的意思是，如果作者输入了[$]，那么我想验证[开始括号和]结束括号是否相同。我们将非常感谢任何指针。

您可以使用基金会验证库进行此操作。这样，您就可以跨项目中的所有组件重用验证。像添加新属性这样简单的操作

这已在AEM 6.3/6.4上进行了测试，但也应适用于6.2

这也适用于使用granite组件以及coral库创建的字段。根据要求的复杂性，需要对花岗岩和珊瑚组件进行微小更改

步骤：

使用categories->cq.authoring.dialog或您需要的任何自定义clientlib类别为项目创建名为touch dialog validation的通用clientlibs文件夹。在使用cq.authoring.dialog的情况下，默认情况下会调用该对话框，但在使用自定义clientlib类别的情况下，则需要将其包含在模板或组件中。包括用于编写验证的js文件。用Valuest.js文件中的Puffas.Valual.ValueAudio创建一个名为Suffic的属性。在我们的例子中，txt validate属性。在需要验证的节点下创建granite:data node nt:unstructured，并添加其他属性作为编写验证逻辑可能需要的属性。在我们的例子中，模式属性。注意：它不一定总是验证属性，我们可以使用granite:class或granite:id作为选择器。在这种情况下，validations.js中的选择器需要相应地更改。如果需要验证多字段中的字段，比如textfield，则可以编写相同的字段，只需在字段节点上使用相应的选择器，即可实现如下所示的验证

下面的代码验证文本字段以检查某些预设模式。预设模式可以在/libs/granite/ui/components/foundation/form/formbuilder/clientlibs/js/form-validation.js中找到

    (function($, window, document) {

    /* Adapting window object to foundation-registry */
    var registry = $(window).adaptTo("foundation-registry");

    /*Validator for TextField - Any Custom logic can go inside validate function - starts */
    registry.register("foundation.validation.validator", {

        selector: "[data-validation=txt-validate]",
        validate: function(el) {
            var element = $(el);
            var pattern = element.data('pattern');
            var value = element.val();
            if (value.length == 0) {

                return "Please enter text";
            } else {

                patterns = {

                    phone: /([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)/,

                    email: /((([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-zA-Z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?/,

                    url: /(https?|ftp):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?/,

                    // number: /-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?/,
                    number: /^\s*(\+|-)?((\d+(\.\d+)?)|(\.\d+))\s*$/,

                    dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,

                    alpha: /[a-zA-Z]+/,
                    alphaNumeric: /\w+/,
                    integer: /-?\d+/,
                    systemKey: /^[-_a-z0-9]+$/i

                }

                /*
                 * Test pattern if set. Pattern can be a preset regex pattern name or
                 * a regular expression such as "^\\d+$".
                 */
                if (pattern) {
                    if (patterns[pattern]) {
                        error = !patterns[pattern].test(value);
                    } else {
                        error = !(new RegExp(pattern)).test(value);
                    }

                    if (error) {
                        return "The field must match the pattern: " + pattern;
                    }
                }   

            }

        }
    });
})
($, window, document);

例1：检查数据是否不为空且包含URL

CRX:

输出：

例2：检查数据是否不为空，以及coral multifield中是否包含textfield的字母。多领域资源类型：花岗岩/ui/组件/coral/foundation/form/Multifield

CRX: 输出：

为什么我会推荐这一点：

您有一个用于所有对话框验证的集中式clientlibrary文件夹，它通过为每个组件复制js而保存。使用foundation validation即使在键入输入时也会应用验证，而不一定在单击对话框submit时应用。

您可以为此使用foundation验证库。这样，您就可以跨项目中的所有组件重用验证。像添加新属性这样简单的操作