BootstrapBlazor-ValidateForm 表单验证组件
原文链接:
故名思意,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute 特性食用更佳,
组件说明:
ValidateForm组件支持异步设置Model值- 表单事件为
OnValidSubmitOnInvalidSubmit Model参数为必填项不允许为空- 表单内可以放置多个按钮,通过设置
ButtonType='ButtonType.Submit'参数是否提交表单 - 客户端验证机制支持模型的
Required标签,通过设置ErrorMessage参数设置提示信息,未设置时使用默认的英文提示信息 - 表单默认检查表单内绑定字段值是否合法,如需要检查模型所有字段时可设置
ValidateAllProperties属性值为true - 通过设置提交按钮
Button属性IsAsync值,设置异步提交表单 - 表单内组件控件的值修改后
OnFieldChanged方法被调用
注意事项:
- 表单内组件通常用法都是使用双向绑定技术对
Model的属性值进行双向绑定,当其值改变时会导致所在组件StateHasChanged方法被调用,即其所在组件或者页面进行刷新重新渲染 - 组件前置标签默认宽度为
120px六个汉字,如需要更多汉字请在项目样式文件中更改样式变量--bs-row-label-width即可,或者设置表单显示标签在组件上方
Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| Model | 表单组件绑定的数据模型,必填属性 | object | — | — |
| ValidateAllProperties | 是否检查所有字段 | bool | true/false | false |
| ShowRequiredMark | 表单内必填项是否显示 * 标记 | bool | true/false | true |
| ShowLabelTooltip | 鼠标悬停标签时显示完整信息 | bool? | true/false/null | null |
| ChildContent | 子组件模板实例 | RenderFragment | — | — |
| OnValidSubmit | 表单提交时数据合规检查通过时的回调委托 |
EventCallback |
— | — |
| OnInvalidSubmit | 表单提交时数据合规检查未通过时的回调委托 |
EventCallback |
— | — |
Methods 方法
| 参数 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| SetError | 设置验证失败方法 | PropertyName, ErrorMessage | — |