Ag-Grid默认单元格编辑器的验证实现方案咨询

Ag-Grid仅设置editable: true的默认单元格编辑器没有开箱即用支持maxlength限制、正则校验及文本框下方显示错误信息的功能，但无需自定义cellRenderer，通过配置编辑器参数或自定义cellEditor即可实现需求：

1. 实现输入长度限制（maxlength） #

默认文本编辑器agTextCellEditor支持通过cellEditorParams直接传递原生input的属性，包括maxLength：

columnDefs: [
  {
    field: "username",
    editable: true,
    cellEditor: "agTextCellEditor",
    cellEditorParams: {
      maxLength: 10 // 限制输入最多10个字符
    }
  }
]

2. 正则校验与错误提示 #

方式一：利用内置校验钩子+样式标记 #

通过isValid回调做校验，结合cellClassRules标记错误单元格：

columnDefs: [
  {
    field: "email",
    editable: true,
    // 编辑提交时校验
    isValid: (params) => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(params.newValue);
    },
    // 校验不通过时添加错误样式
    cellClassRules: {
      "invalid-cell": (params) => {
        if (params.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(params.value)) {
          return true;
        }
        return false;
      }
    }
  }
]

配合CSS定义错误样式：

.invalid-cell {
  border: 1px solid red !important;
}

方式二：自定义编辑器实现实时错误提示 #

如果需要在编辑过程中实时显示错误信息在文本框下方，需自定义cellEditor（以React为例）：

function CustomEmailEditor(props) {
  const [value, setValue] = useState(props.value);
  const [errorMsg, setErrorMsg] = useState("");
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  const handleInputChange = (e) => {
    const inputVal = e.target.value;
    setValue(inputVal);
    if (inputVal && !emailRegex.test(inputVal)) {
      setErrorMsg("请输入有效的邮箱格式");
    } else {
      setErrorMsg("");
    }
  };

  return (
    <div className="custom-editor">
      <input
        type="text"
        value={value}
        onChange={handleInputChange}
        onBlur={() => props.stopEditing()}
      />
      {errorMsg && <div style={{ color: "red", fontSize: "12px", marginTop: "4px" }}>{errorMsg}</div>}
    </div>
  );
}

// 列配置
columnDefs: [
  {
    field: "email",
    editable: true,
    cellEditor: CustomEmailEditor
  }
]

关键说明 #

• 无需自定义cellRenderer：cellRenderer负责单元格的静态显示逻辑，编辑功能由cellEditor控制，聚焦在编辑器的配置或自定义即可。
• 默认编辑器仅提供基础编辑能力，复杂校验和交互提示需通过扩展参数或自定义编辑器实现。

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