原文链接: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

BootstrapBlazor-ValidateForm 表单验证组件的更多相关文章

  1. Form表单验证组件

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  2. jQuery表单验证组件BootstrapValidator

    github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...

  3. vee-validate表单验证组件

    vee-validate是VUE的基于模板的验证框架,允许您验证输入并显示错误 安装 npm i vee-validate --save 引入 import Vue from 'vue'; impor ...

  4. (七十六)c#Winform自定义控件-表单验证组件

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  5. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  6. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  7. vue 中跨组件的表单验证

    使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...

  8. vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  9. 让Angular自定义组件支持form表单验证

    Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...

随机推荐

  1. MATLAB神经网络应用设计【2】

    一.深度学习中经常看到epoch. iteration和batchsize,下面按自己的理解说说这三个的区别: (1)batchsize:批大小.在深度学习中,一般采用SGD训练,即每次训练在训练集中 ...

  2. Laravel 8 图片上传七牛云

    1.利用 composer 下载依赖包 composer require itbdw/laravel-storage-qiniu 2.打开 config 文件夹下的 app.php 文件,在 prov ...

  3. 题解 CF17E 【Palisection】

    卡空间PAM,2010没有PAM,所以都是马拉车 众所周知,PAM拥有十分优秀的时间复杂度,但空间复杂度lj得不行 但这题卡空间,所以得用到邻接链表PAM 先讲思路 题目要求相交的回文子串对,这很难做 ...

  4. 统计学中数据分布的偏度(skewness)和峰度(kurtosis)

  5. WPF之转换器

    IValueConverter的用法1. COnvert方法object Convert( object value, Type targetType, object parameter, Cultu ...

  6. linux查看和替换python软连接

    linux查看和替换python软连接 查看使用的python版本的路径 # which python 这里是在/usr/bin/python 然后查看链接指向, # ls -l /usr/bin/p ...

  7. Redis安装以及常见问题

    安装 下载 redis官网地址:https://redis.io/ centos安装 创建软件放置目录mkdir soft 进入soft目录并下载redis安装包. cd soft wget http ...

  8. Mybatis中的基本对象的生命周期和作用域

    不同作用域和生命周期类别是至关重要的,因为错误的使用会导致非常严重的并发问题 SqlSessionFactoryBuilder 这个类可以被实例化.使用和丢弃,一旦创建了 SqlSessionFact ...

  9. 什么是BGP

    BGP概述 边界网关协议(BGP)是运行于TCP协议上的一种自治系统的路由协议. 是一种外部路由协议. AS概述 自治系统(AS),指的是同一个使用相同策略的设备的集合. 每个AS有自己位移的编号,不 ...

  10. 机械学习笔记1 -> Solidworks三维产品设计与建模1 | 建模基础入门

    学习之余,课余了解一点点,作为爱好,妄想以后能够设计机甲出来. 学习来源是Solidworks三维产品设计与建模 00 工作界面介绍 00-1 概览 有时菜单栏和工具栏会重叠在一起,只有点击左侧三角才 ...