Tabulator JS如何实现用户输入时实时验证数字字段？

你可以通过自定义单元格编辑器+实时事件绑定的方式完全覆盖两个需求，无需依赖Tabulator自带的校验逻辑和numeric编辑器，具体实现如下：

核心实现思路 #

• 不使用官方自带的numeric编辑器，改为自定义text类型的输入编辑器，从根源避免步进箭头、允许输入e等问题
• 在编辑器的input事件中绑定两个核心逻辑：非法字符过滤、实时校验更新边框样式
• 编辑器渲染完成后先执行一次校验，解决历史编辑遗留的红色边框残留问题

完整代码示例 #

1. 自定义小数编辑器 #

// 自定义支持1-2位小数的编辑器，内置实时校验和输入限制
const decimalEditor = function(cell, onRendered, success, cancel, editorParams) {
    // 创建text类型输入框，避免number类型的步进箭头和e输入问题
    const input = document.createElement("input");
    input.type = "text";
    input.value = cell.getValue() ?? "";
    input.style.cssText = "padding: 4px;width: 100%;box-sizing: border-box;border: 1px solid #ddd;";

    // 校验规则：仅允许正整数、带1-2位小数的正数，可根据需求调整正则
    const validate = (val) => /^\d+(\.\d{1,2})?$/.test(val) && Number(val) >= 0;

    // 实时输入处理
    input.addEventListener("input", function() {
        // 第一步：过滤所有非数字、非小数点的字符，禁止输入e、字母、符号等
        this.value = this.value.replace(/[^\d.]/g, "");
        // 第二步：限制仅允许存在一个小数点
        if (this.value.split(".").length > 2) {
            this.value = this.value.slice(0, this.value.lastIndexOf("."));
        }
        // 第三步：限制小数位最多2位，可根据需求调整位数
        if (this.value.includes(".") && this.value.split(".")[1].length > 2) {
            this.value = this.value.slice(0, this.value.indexOf(".") + 3);
        }
        // 第四步：实时更新边框样式
        this.style.border = validate(this.value) ? "1px solid #ddd" : "1px solid red";
    });

    // 绑定提交、取消逻辑
    input.addEventListener("blur", () => validate(input.value) ? success(input.value) : cancel());
    input.addEventListener("keydown", (e) => {
        if (e.keyCode === 13) validate(input.value) && success(input.value);
        if (e.keyCode === 27) cancel();
    });

    onRendered(() => {
        input.focus();
        input.select();
        // 初始化时执行一次校验，解决历史编辑残留的红色边框问题
        input.style.border = validate(input.value) ? "1px solid #ddd" : "1px solid red";
    });

    return input;
}

2. 列配置关联自定义编辑器 #

const table = new Tabulator("#你的表格容器ID", {
    // 其余表格配置保持不变
    columns: [
        {
            title: "数值字段",
            field: "你的字段名",
            editor: decimalEditor, // 关联刚才定义的自定义编辑器
            // 可选：保留Tabulator全局校验规则，和上面的校验逻辑保持一致即可
            validator: (cell, value) => /^\d+(\.\d{1,2})?$/.test(value) && Number(value) >= 0
        },
        // 其余列配置保持不变
    ]
})

规则调整说明 #

• 如需调整小数允许的位数，修改正则里的{1,2}即可，比如仅允许1位小数改为{1,1}
• 如需允许输入负数，把正则开头增加-?即可，修改为/^-?\d+(\.\d{1,2})?$/
• 边框样式可以根据你的项目UI自行调整，默认匹配Tabulator原生校验的红色边框即可

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