如何通过JavaScript实现表单按钮的条件显示——仅当DESCRIPTION字段以数字开头时可见

嘿，我来帮你解决这个按钮显示的问题！你想要让OnBase按钮只在DESCRIPTION字段以数字开头时才出现，其实只需要加个判断逻辑，动态控制按钮的显示状态就行，下面是具体的实现步骤：

核心思路是在表单加载和DESCRIPTION字段内容变化时，检查字段值是否以数字开头，然后切换按钮的显示/隐藏状态。

1. 先确认按钮的初始状态 #

你的按钮当前设置了tp="Hidden"，刚好适合作为初始隐藏状态，保持这个配置即可：

<push al="center" btnnm="OnBase" col="45" det="DT0" height="1" id="hidden57" keynbr="function=ShowOnBaseInvoiceDocument()" nbr="_f292r0" nm="" par="DT0" row="1" sz="8" tooltip="" tp="Hidden"/>

注意：按钮的keynbr里调用的函数是ShowOnBaseInvoiceDocument()，但你提供的函数名是ShowOnBaseInvoiceDocument0，后面需要统一这个命名，要么改按钮的keynbr，要么改函数名。

2. 添加按钮显示控制函数 #

写一个专门的函数来判断DESCRIPTION字段的内容，并控制按钮的显示状态：

// 检查DESCRIPTION字段，动态切换OnBase按钮的显示/隐藏
function toggleOnBaseButton() {
    // 获取DESCRIPTION字段的原始值，为空时用空字符串兜底
    var descValue = Form.getDataValue("DESCRIPTION", 0) || "";
    // 通过id定位到按钮元素
    var onBaseBtn = document.getElementById("hidden57");
    
    // 用正则判断是否以数字开头：trim()先去掉首尾空格，避免空格干扰判断
    var startsWithNumber = /^\d/.test(descValue.trim());
    
    // 根据判断结果切换按钮的tp属性："Push"是显示，"Hidden"是隐藏
    onBaseBtn.setAttribute("tp", startsWithNumber ? "Push" : "Hidden");
}

3. 设置触发时机 #

我们需要在两个关键时机调用上面的函数，确保按钮状态正确：

表单加载完成时初始化 #

在表单加载完成后，立刻检查DESCRIPTION字段，设置按钮初始状态：

// 假设表单加载完成的回调是Form.onLoad，根据你的实际框架调整
Form.onLoad = function() {
    toggleOnBaseButton();
};

监听DESCRIPTION字段的变化 #

当用户修改DESCRIPTION字段内容时，实时更新按钮状态：

// 页面DOM加载完成后，给DESCRIPTION字段绑定输入事件
document.addEventListener("DOMContentLoaded", function() {
    // 根据表单实际结构定位DESCRIPTION字段，这里用name属性举例，你可能需要调整
    var descField = document.querySelector('[name="DESCRIPTION"]');
    if (descField) {
        descField.addEventListener("input", toggleOnBaseButton);
    }
});

4. 整合完整代码 #

把控制函数和你原有的打开外部URL的函数整合起来，注意统一函数命名：

// 修正函数名，和按钮keynbr里的调用保持一致
function ShowOnBaseInvoiceDocument() { 
    var onBaseServer = "someserver"; 
    var appName = "Dev"; 
    var screenID = "90"; 
    var accField = "InvoiceNum"; 
    var venField = "VendorID"; 
    var company = Form.getDataValue("TO-COMPANY"); 
    var RefNums = Form.getDataValue("REFERENCE", 0); 
    var RefNum = RefNums.trim(); 
    var sVenNumbers = Form.getDataValue("DESCRIPTION", 0); 
    var sVenNumber = sVenNumbers.substring(0,9); 
    
    if (RefNums == "") { 
        portalWnd.cmnDlg.messageBox("Not a valid invoice.","ok","info",window,false);
        return true; 
    } 
    
    var s = "http://" + encodeURIComponent(onBaseServer) + "/OnBaseLinkScanWeb/AccLogin.aspx?DBID=" + encodeURIComponent(appName) + "&ScreenID=" + encodeURIComponent(screenID) + "&Company=" + encodeURIComponent(company) + "&RefNum=" + encodeURIComponent(RefNum) + "&" + encodeURIComponent(venField) + "=" + encodeURIComponent(portalWnd.strTrim(sVenNumber)); 
    window.open(s, "My Invoice"); 
    console.log(s); 
    return true; 
}

// 按钮显示控制函数
function toggleOnBaseButton() {
    var descValue = Form.getDataValue("DESCRIPTION", 0) || "";
    var onBaseBtn = document.getElementById("hidden57");
    var startsWithNumber = /^\d/.test(descValue.trim());
    
    onBaseBtn.setAttribute("tp", startsWithNumber ? "Push" : "Hidden");
}

// 表单加载初始化
Form.onLoad = function() {
    toggleOnBaseButton();
};

// 监听字段变化
document.addEventListener("DOMContentLoaded", function() {
    var descField = document.querySelector('[name="DESCRIPTION"]');
    if (descField) {
        descField.addEventListener("input", toggleOnBaseButton);
    }
});

一些注意事项 #

• 字段定位：如果document.querySelector('[name="DESCRIPTION"]')找不到字段，你需要根据表单实际的HTML结构调整定位方式，比如用字段的id属性。
• 框架适配：如果你的表单是基于特定低代码平台的，优先使用平台提供的字段监听API，而不是原生JS的addEventListener。
• 正则逻辑：/^\d/会匹配任何以0-9开头的字符串，trim()已经处理了字段首尾的空格，不会出现开头空格导致判断失效的情况。

内容的提问来源于stack exchange，提问作者user12938