javascript - 验证和默认弹出窗口关闭

Question

我在node-red中创建了一个自定义节点

<script type="text/javascript">
    RED.nodes.registerType('project', {
        category: 'My Category',
        color: 'rgb(192, 237, 192)',
        defaults: {
            name: { value: "", required:true },
            project: { value: "", required:true }
        },
        inputs: 0,
        outputs: 1,
        onpaletteadd: function (index) {
            var node = this;
            var sessionStorageData = sessionStorage.getItem(node.z);
            if (sessionStorageData && (JSON.parse(sessionStorageData)).id != node.id) {
                alert("Flow cannot have more then one Project node!!!")
            }
            if (!sessionStorageData) {
                sessionStorageData = { id: node.id }
            } else {
                sessionStorageData = JSON.parse(sessionStorageData);
            }
            sessionStorageData.project = node.project;
            sessionStorage.setItem(node.z, JSON.stringify(sessionStorageData));
        },
        oneditprepare: function (index) {
            var node = this;
            $.ajax({
                type: "GET",
                url: "../getExternalData?path=get",
                dataType: "json",
                success: function (data1) {
                    this.preload = true;
                    var appenddata1 = "";
                    $.each(data1, function (key, val) {
                        appenddata1 += "<option value = '" + key + "'>" + val + " </option>";
                    });
                    $("#node-input-project").append(appenddata1);
                    $("#node-input-project").val(node.project);
                }
            });
        },
        oneditsave: function (index) {
            var node = this;
            var sessionStorageData = sessionStorage.getItem(node.z);
            if (!sessionStorageData) {
                sessionStorageData = { id: node.id }
            } else {
                sessionStorageData = JSON.parse(sessionStorageData);
            }
            sessionStorageData.project = $("#node-input-project").val();
            sessionStorage.setItem(node.z, JSON.stringify(sessionStorageData));
        },
        icon: "cog.png",
        label: function () {
            return this.name || "Project";
        }
    });
</script>

<script type="text/x-red" data-template-name="project">
    <div class="form-row">
            <label for="node-input-name"><i class="icon-tag"></i>Workflow Name</label>
            <input type="text" id="node-input-name" placeholder="Workflow Name"/>
        </div>
    <div class="form-row">
        <label for="node-input-project"><i class="icon-tag"></i> Project</label>
        <select type="text" id="node-input-project">
            <option value=" ">Please select a Project</option>
        </select>
    </div>
</script>

令我惊讶的是required只是使文本框变成红色，并且没有停止弹出窗口在单击Done按钮时关闭，我尝试return false 在 oneditsave 中，但这也没有帮助。

Answer 1

如 Node-RED docs 中所述创建节点时，您可以将 validate 函数添加到节点 html 文件的 defaults 部分。

有 2 个内置验证器，

• RED.validators.number()
• RED.validators.regex(re)

但是您也可以附加自己的函数:

defaults: {
   minimumLength: { value:0, validate:RED.validators.number() },
   lowerCaseOnly: {value:"", validate:RED.validators.regex(/[a-z]+/) },
   custom: { value:"", validate:function(v) {
      var minimumLength=$("#node-input-minimumLength").length?$("#node-input-minimumLength").val():this.minimumLength;
      return v.length > minimumLength 
   } }
},

但即使在使用这些或 required: true 之后，用户仍然可以点击“完成”按钮。当用户尝试部署包含缺失或无效字段值的节点的流时，将向用户显示警告，但无法阻止用户部署输入数据错误的流。