Blazor TelerikTextBox基于自定义/Regex校验的取值与按钮启用控制

要实现所有输入框非空且符合校验规则时才启用按钮，核心是利用Blazor的EditContext验证体系，结合数据注解或自定义校验器，将表单的实时验证状态传递给父组件控制按钮状态。以下是具体实现步骤：

1. 完善模型的校验规则（InfoModel.cs） #

首先给数据模型添加数据注解，内置注解或正则表达式都可以直接用于校验：

using System.ComponentModel.DataAnnotations;

public class InfoModel
{
    [Required(ErrorMessage = "邮箱不能为空")]
    [EmailAddress(ErrorMessage = "请输入有效的邮箱格式")]
    public string Email { get; set; }

    [Required(ErrorMessage = "手机号不能为空")]
    // 示例正则：支持带+号的10-15位数字/空格/横杠
    [RegularExpression(@"^\+?[0-9\s-]{10,15}$", ErrorMessage = "请输入有效的手机号")]
    public string PhoneNumber { get; set; }
}

2. 修改子组件InfoForm.razor，集成验证体系 #

用EditForm包裹表单内容，订阅验证状态变化事件，并将状态传递给父组件：

<EditForm Model="_psfValidator" EditContext="_editContext">
    <DataAnnotationsValidator />

    <FormItem Field="@nameof(_psfValidator.Email)">
        <Template>
            <div class="input-field">
                <label for="email"><b>E-mail<span>*</span></b></label>
                <TelerikTextBox PlaceHolder="E-mailadres" 
                                Value="@_psfValidator.Email" 
                                ValueChanged="@( (string s) => EmailOnChangeHandler(s) )" 
                                ValueExpression="@( () => _psfValidator.Email )">
                </TelerikTextBox>
                <TelerikValidationMessage For="@(() => _psfValidator.Email)"></TelerikValidationMessage>
            </div>
        </Template>
    </FormItem>

    <FormItem Field="@nameof(_psfValidator.PhoneNumber)">
        <Template>
            <div class="input-field">
                <label for="phone"><b>Telefoon</b></label>
                <TelerikTextBox PlaceHolder="Telefoonnummer" 
                                Value="@_psfValidator.PhoneNumber" 
                                ValueChanged="@( (string s) => PhonenumberOnChangeHandler(s) )" 
                                ValueExpression="@( () => _psfValidator.PhoneNumber )">
                </TelerikTextBox>
                <TelerikValidationMessage For="@(() => _psfValidator.PhoneNumber)"></TelerikValidationMessage>
            </div>
        </Template>
    </FormItem>
</EditForm>

@code {
    private InfoModel _psfValidator = new InfoModel();
    private EditContext _editContext;

    // 向父组件传递验证状态的回调
    [Parameter]
    public EventCallback<bool> OnValidationStateChanged { get; set; }

    protected override void OnInitialized()
    {
        _editContext = new EditContext(_psfValidator);
        // 订阅验证状态变更事件
        _editContext.OnValidationStateChanged += async (_, __) =>
        {
            var isValid = _editContext.Validate();
            await OnValidationStateChanged.InvokeAsync(isValid);
        };
        base.OnInitialized();
    }

    private void EmailOnChangeHandler(string s)
    {
        _psfValidator.Email = s;
        _editContext.Validate(); // 值变更时触发实时验证
    }

    private void PhonenumberOnChangeHandler(string s)
    {
        _psfValidator.PhoneNumber = s;
        _editContext.Validate();
    }
}

3. 修改父组件AllForms.razor，控制按钮启用状态 #

接收子组件传递的验证状态，绑定到按钮的Enabled属性：

<InfoForm OnValidationStateChanged="@HandleValidationState" />

<TelerikButton ButtonType="ButtonType.Button" 
               ThemeColor="primary" 
               Enabled="@_isFormValid"
               OnClick="@(() => { Value += 1; NextHandler(); })">
    Verder
</TelerikButton>

@code {
    private bool _isFormValid = false;
    private int Value { get; set; }

    private void HandleValidationState(bool isValid)
    {
        _isFormValid = isValid;
        StateHasChanged(); // 触发组件重新渲染更新按钮状态
    }

    private void NextHandler()
    {
        // 编写下一步业务逻辑
    }
}

关键说明 #

• 自动校验：DataAnnotationsValidator会自动识别模型上的注解，无需手动编写正则判断逻辑
• 实时同步：每次输入值变更时调用_editContext.Validate()，确保验证状态实时更新
• 状态传递：通过EventCallback将子组件的验证结果传递给父组件，实现跨组件状态同步
• 按钮控制：按钮的Enabled属性直接绑定到验证结果，只有所有校验通过时才会启用

内容的提问来源于stack exchange，提问作者KroSral