code学习

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

继续阅读