FormFeedback

基础表单

基于 Bootstrap 5 的表单校验反馈组件，为表单控件提供有效（valid-feedback / valid-tooltip）与无效（invalid-feedback / invalid-tooltip）反馈文本，配合 isValid / isInvalid 校验状态、was-validated 表单类与浏览器原生约束校验使用

Component Demo

Basic usage and examples of the FormFeedback component

自定义样式

看起来不错！

请输入内容。

为表单控件设置 isValid / isInvalid 属性应用 is-valid / is-invalid 样式，并通过 FormFeedback 提供对应的有效/无效反馈文本

浏览器默认校验

借助原生约束校验（required、pattern），提交时通过 checkValidity 决定是否添加 was-validated 类，让浏览器自动应用 :valid / :invalid 样式并显示对应反馈

服务端校验

服务端渲染场景下，为表单添加 was-validated 类并显式设置 is-valid / is-invalid 状态，即可在页面加载后立即展示校验结果

支持的元素

看起来不错！

请选择一个值。

无效的复选框

必须勾选此复选框。

校验样式同样适用于 FormSelect、FormRange 与 FormCheck 等表单控件

工具提示

设置 tooltip 属性可渲染 valid-tooltip / invalid-tooltip 工具提示样式，父容器需要 position-relative 定位

交互演示

API Documentation

Complete API reference for the FormFeedback component

Props

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，可传入 `span`、`p` 或自定义组件
`children`	`ReactNode`	-	反馈内容，通常为一段简短的有效或无效提示文本
`className`	`string`	-	自定义类名
`id`	`string`	-	原生 `id` 属性，用于与表单控件的 `aria-describedby` 关联
`tooltip`	`boolean`	`false`	是否以工具提示样式渲染（`valid-tooltip` / `invalid-tooltip`），需要为父容器设置 `position-relative` 以正确定位
`type`	`FormFeedbackType`	`'valid'`	反馈类型，`valid` 渲染 `valid-feedback`（或 `valid-tooltip`），`invalid` 渲染 `invalid-feedback`（或 `invalid-tooltip`）
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `role`、`aria-*` 等）

Type Definitions

FormFeedbackProps

表单校验反馈组件属性接口

export interface FormFeedbackProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  tooltip?: boolean;
  type?: FormFeedbackType;
}

FormFeedbackType

表单校验反馈类型

export type FormFeedbackType = 'invalid' | 'valid';