我正在尝试Microsoft Blazor，在使用表单和验证时，我停止了如何更改默认情况下将在验证状态上添加的默认 CSS 类InputText。
对于默认情况下InputText有错误的解释，请采取类"invalid"我想将此类更改为"is-invalid">
我需要最佳实践。
谢谢，堆栈溢出社区
现在可以自定义，请参阅此处：https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#custom-validation-class-attributes
var editContext = new EditContext(model);
editContext.SetFieldCssClassProvider(new MyFieldClassProvider());
...
private class MyFieldClassProvider : FieldCssClassProvider
{
public override string GetFieldCssClass(EditContext editContext,
in FieldIdentifier fieldIdentifier)
{
var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
return isValid ? "good field" : "bad field";
}
}
任何HTML元素(或InputText(属性(包括类(都可以"单向"绑定到变量或表达式。因此，在您的情况下，您可以执行以下操作：
<input type="text" class="@((any_validation_condition)? "error_css_class" : "")" />
或者只是绑定到一个变量并在运行时设置该变量以反映元素的合适显示类。
谢谢
是的，确实可以在Core 5.0中自定义，但是给出的示例无法正常工作。方法HandleSubmit必须将EditContext作为参数，并且自定义FieldCssClassProvider设置在那里，而不是像示例中那样OnInitialized()。
private async Task HandleSubmit(EditContext context)
{
context.SetFieldCssClassProvider(new MyFieldClassProvider());
var isValid = context.Validate();
if (isValid)
{
//...
}
else
{
//...
}
我的MyFieldClassProvider()返回"is-valid"和"is-invalid"，这适用于引导程序。
Blazor任意选择invalid作为css类，用于基于InputBase<T>的项目的验证，就像InputText一样。但是，您可以创建一个新控件，例如MyInputText.razor从这些控件继承，并创建自己的控件并将中间代码放置到位。
在这种情况下，你可以用字符串替换(但前面加上空格字符！(CssClass属性替换invalidis-invalid，和/或validis-valid。您可以创建一个帮助程序方法，也可以简单地内联执行此操作：
@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" class="@CssClass.Replace(" valid", " is-valid").Replace(" invalid", " is-invalid")" @bind="@CurrentValueAsString" />
并像普通InputText一样使用它：
<MyInputText @bind-Value="yourModel.Foo" class="form-control" />
作为@user774031答案的补充： Blazor 框架将 Id 添加到隔离的 css 类，使它们的作用域为 Razor 组件，但由于此 Id 属性是在运行时添加的，因此它们不会添加到子 InputComponent，因此使用 css 隔离定义的 css 类不适用，我们应该全局定义它们。为了使它们作为独立的css类工作，请定义它们，例如： 1-定义一个从FieldCssClassProvider继承的.Net类并覆盖其GetFieldCssClass方法。此方法应 从editcontext和fieldIdentifier对象返回一些string作为类名。
public class MyCustomeCSSProvider : FieldCssClassProvider
{
public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
{
string className = string.Empty;
if (editContext.IsModified(fieldIdentifier))
{
className += " modifiedField";
}
if (editContext.GetValidationMessages(fieldIdentifier).Any())
{
className += " invalidField";
}
else
{
className += " validField";
}
return className;
}
}
2- 在OnInitialized生命周期中 使用扩展方法设置用于编辑上下文的 CssClassProvider：
_context = new EditContext(student);
_context.SetFieldCssClassProvider(new MyCustomeCSSProvider());
3-使用::deep在隔离的css文件中定义您的类，如下所示：
::deep .validField {
border-color: lawngreen;
}
::deep .invalidField {
background-color: tomato;
}
::deep .modifiedField {
border: yellow dashed 2px;
}
在这个派对上有点晚了，但为了设置验证消息本身的样式，我这样做了：
<div class="text-danger mt-2">
<ValidationMessage For="()=>_model.Field" ></ValidationMessage>
</div>