BootstrapBlazor-ValidateForm 表单验证组件
原文链接:https://www.cnblogs.com/ysmc/p/16082279.html
故名思意,这个组件的作用我就不再多说了,配合 AutoGenerateColumnAttribute 特性食用更佳,BootstrapBlazor 智能生成神器(一)AutoGenerateColumnAttribute 特性介绍 - 一事冇诚 - 博客园 (cnblogs.com)
组件说明:
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<EditContext>
|
—
|
—
|
|
OnInvalidSubmit
|
表单提交时数据合规检查未通过时的回调委托
|
EventCallback<EditContext>
|
—
|
—
|
Methods 方法
|
参数
|
说明
|
参数
|
返回值
|
|---|---|---|---|
|
SetError
|
设置验证失败方法
|
PropertyName, ErrorMessage
|
—
|
BootstrapBlazor-ValidateForm 表单验证组件的更多相关文章
- Form表单验证组件
Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...
- jQuery表单验证组件BootstrapValidator
github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator ...
- vee-validate表单验证组件
vee-validate是VUE的基于模板的验证框架,允许您验证输入并显示错误 安装 npm i vee-validate --save 引入 import Vue from 'vue'; impor ...
- (七十六)c#Winform自定义控件-表单验证组件
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- JS组件系列——Form表单验证神器: BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- 让Angular自定义组件支持form表单验证
Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...
随机推荐
- java上传图片时压缩图片
/** * 函数:调整图片尺寸或生成缩略图 v 1.1 * @param $Image 需要调整的图片(含路径) * @param $Dw 调整时最大宽度;缩略图时的绝对宽度 * @param $Dh ...
- 30道关于linux的基础命令小题,先练练手
1.修改主机名为yuanlai0224命令是: 2.切换⽬录到/yuchao01/data/,再创建脚本/my_website/scripts/start.sh. 绝对路径.相对路径两种写法 3.查看 ...
- 金蝶 K3 WISE 服务器必须登陆到桌面以后用户才能正常使用解决!
我们单位K3的系统,由当地的服务商安装完以后就出现各种蛋疼的问题.做技术支持的小伙他总是会给一个小工具来解决,问他是什么原因要么说我的网络有问题,要么说我们的服务器有问题. K3所有客户端无法登陆一键 ...
- HIve的基本使用
WHERE从表中筛选行: SELECT从表中查询指定的列: group by在列上做聚合. -- 假设数据文件的内容,字段之间以ASCII 001(ctrl-A)分隔,行之间以换行分隔. CREATE ...
- linux查看和替换python软连接
linux查看和替换python软连接 查看使用的python版本的路径 # which python 这里是在/usr/bin/python 然后查看链接指向, # ls -l /usr/bin/p ...
- 《前端运维》一、Linux基础--09常用软件安装
一.软件包管理 RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的"添加/删除程序".软件包有几种类型,我们一起来看下: 源 ...
- Zabbix 4.4管理界面中文乱码解决方法
1.zabbix 4.4 安装配置过程可参考官方文档: 文档链接地址:https://www.zabbix.com/download?zabbix=4.4&os_distribution=ce ...
- ansible 二主机和组
主机清单的管理 Ansible安装好之后的主机清单配置文件有如下两种: 1.yum安装,配置文件默认路径为: /etc/ansible/hosts 2.源码包安装,主机清单配置文件路径需要从软件包里面 ...
- Docker容器入门实践
Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 ...
- luoguP5319 [BJOI2019]奥术神杖(分数规划,AC自动机DP)
luoguP5319 [BJOI2019]奥术神杖(分数规划,AC自动机DP) Luogu 题解时间 难点在于式子转化,设有c个满足的子串,即求最大的 $ ans = \sqrt[c]{\prod_{ ...