文本字段上的 AEM 6.2 触摸 UI 验证

Question

文本字段上的 AEM 6.2 触摸 UI 验证

在我的 AEM touch ui 对话框中，我有一个文本字段。在该文本字段中，作者可以像这样输入数据。“[$]”或“{$}”或“($)”。现在我的要求是验证左括号和右括号是否相同。我的意思是如果作者输入了 [$]，那么我想验证 [（左括号）和 ]（右括号）是否相同。任何指针将不胜感激。

Answer 1

Ram*_*Pai 6

您可以为此使用基础验证库。这样您就可以在项目中的所有组件中重复使用验证。就像添加新属性一样简单。

这已在 AEM 6.3/6.4 上测试过，但也适用于 6.2。

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

脚步：

使用类别 -> cq.authoring.dialog 或您需要的任何自定义 clientlib 类别为项目创建一个名为 touch-dialog-validation 的通用 clientlibs 文件夹。如果使用 cq.authoring.dialog，默认情况下会调用它，但如果您使用自定义 clientlib 类别，则需要将其包含在模板或组件中。
包含用于编写验证的 js 文件。
创建一个名为“validation”的属性，其值在validations.js 文件中使用foundation.validation.validator 注册。（在我们的例子中，txt-validate 属性。）
在需要验证的节点下创建“granite:data”节点（nt:unstructured），并添加其他属性作为编写验证逻辑可能需要的属性。（在我们的例子中，模式属性。）注意：它不必总是验证属性，我们可以使用 granite:class 或 granite:id 作为选择器。在这种情况下，validations.js 中的选择器需要相应地更改。

如果多字段中的字段，例如需要验证文本字段，则可以编写相同的内容，只需在字段节点验证上使用相应的选择器即可实现，如下所示。

下面的代码验证文本字段以检查某些预设模式。预设模式可以在 /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);

Run Code Online (Sandbox Code Playgroud)

示例 1： 检查数据是否为非空白且包含 URL。

CRX：