如何在jqGrid中实现验证？如何配置保存按钮仅在字段为数字时保存并提示？

没问题，我来帮你搞定jqGrid里的字段验证和保存按钮的条件触发逻辑！下面分两部分详细说明，附具体代码示例：

jqGrid本身提供了内置的验证机制，同时也支持自定义验证逻辑，主要通过colModel中的配置来实现：

1. 基础数字验证（内置规则） #

在需要验证的列的colModel配置中，添加editrules属性，指定数字验证规则：

$("#yourGridId").jqGrid({
    // 其他配置（如url、datatype、pager等）...
    colModel: [
        // 其他列配置...
        {
            name: "targetField", // 要验证的字段名
            label: "目标字段",
            editable: true,
            editrules: {
                number: true,       // 强制验证为数字格式
                required: true,     // 此字段必填
                minValue: 0,        // 可选：设置最小值
                maxValue: 9999      // 可选：设置最大值
            },
            editoptions: {
                // 可选：输入框失去焦点时即时验证
                dataInit: function(elem) {
                    $(elem).on("blur", function() {
                        const value = $(this).val();
                        if (!$.isNumeric(value)) {
                            $(this).addClass("input-error"); // 给输入框加错误样式
                            alert("请输入有效的数字格式！");
                        } else {
                            $(this).removeClass("input-error");
                        }
                    });
                }
            }
        }
    ]
});

2. 自定义复杂验证 #

如果内置规则满足不了需求，可以用editrules.custom和editrules.custom_func实现自定义验证：

{
    name: "targetField",
    label: "目标字段",
    editable: true,
    editrules: {
        required: true,
        custom: true,
        custom_func: function(value, colName) {
            // 自定义验证逻辑：比如验证是否为正整数
            const reg = /^[1-9]\d*$/;
            if (!reg.test(value)) {
                return [false, colName + "必须是正整数！"];
            }
            return [true, ""];
        }
    }
}

要让保存按钮仅在验证通过时执行保存，有两种常见场景：使用jqGrid内置的导航栏保存按钮，或者自定义保存按钮。

1. 针对内置导航栏的保存按钮 #

通过navGrid配置编辑窗口的beforeSubmit事件，在提交前做最终验证：

$("#yourGridId").jqGrid("navGrid", "#yourPagerId",
    { edit: true, add: true, del: false }, // 导航栏按钮开关
    // 编辑窗口的配置项
    {
        beforeSubmit: function(postData, formId) {
            // 获取要验证的字段值
            const fieldValue = postData.targetField;
            // 执行数字验证
            if (!$.isNumeric(fieldValue)) {
                return [false, "目标字段必须是数字格式，请检查！"];
            }
            // 可选：额外验证范围
            if (parseFloat(fieldValue) < 0) {
                return [false, "目标字段不能为负数！"];
            }
            // 验证通过，允许提交
            return [true, ""];
        },
        afterSubmit: function(response, postData) {
            // 保存成功后的提示或操作
            alert("数据保存成功！");
            return [true, ""];
        }
    }
);

2. 针对自定义保存按钮 #

如果是页面上独立的保存按钮，直接在点击事件中先做验证，通过后再发起保存请求：

<button id="customSaveBtn">保存数据</button>

$("#customSaveBtn").click(function() {
    // 获取当前选中的行ID
    const selectedRowId = $("#yourGridId").jqGrid("getGridParam", "selrow");
    if (!selectedRowId) {
        alert("请先选择要保存的行！");
        return;
    }
    // 获取行数据
    const rowData = $("#yourGridId").jqGrid("getRowData", selectedRowId);
    const fieldValue = rowData.targetField;

    // 执行验证
    if (!$.isNumeric(fieldValue)) {
        alert("目标字段必须是数字格式，请修正后再保存！");
        return;
    }
    if (parseFloat(fieldValue) < 0) {
        alert("目标字段不能为负数！");
        return;
    }

    // 验证通过，发起保存请求
    $.ajax({
        url: "/your/save/api", // 你的保存接口地址
        type: "POST",
        data: rowData,
        success: function(res) {
            alert("保存成功！");
            $("#yourGridId").trigger("reloadGrid"); // 刷新表格
        },
        error: function() {
            alert("保存失败，请稍后重试！");
        }
    });
});

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