BootstrapBlazor-ValidateForm 表单验证组件
原文链接:https://www.cnblogs.com/ysmc/p/16082279.html
顾名思义,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute 特性食用更佳,BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍 - 一事冇诚 - 博客园 (cnblogs.com)
组件说明:
ValidateForm
组件支持异步设置Model
值- 表单事件为
OnValidSubmit
OnInvalidSubmit
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<EditContext>
|
—
|
—
|
OnInvalidSubmit
|
表单提交时数据合规检查未通过时的回调委托
|
EventCallback<EditContext>
|
—
|
—
|
Methods 方法
参数
|
说明
|
参数
|
返回值
|
---|---|---|---|
SetError
|
设置验证失败方法
|
PropertyName, ErrorMessage
|
—
|
本文来自博客园,作者:一事冇诚,转载请注明原文链接:https://www.cnblogs.com/ysmc/p/16082279.html