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	—