如何基于API返回结果在Blazorise中实现密码重置验证并保留原有校验

问题描述 #

我开发了一个使用Blazorise的Blazor应用，密码重置对话框功能正常。现在需要在提交密码到服务器时新增校验逻辑：检查该密码是否曾被使用过，若已使用，则在密码输入框下方显示提示信息。请问如何在Blazorise的Validation组件中实现该功能，同时保留原有的密码格式校验及确认密码匹配校验？

密码重置对话框界面：

当前代码实现：

<Fields>
    <Field ColumnSize="ColumnSize.Is6">
        <FieldLabel RequiredIndicator>密码</FieldLabel>
        <Validation Validator="@ValidatePassword">
            <TextEdit @bind-Text="@User.Password" Placeholder="输入密码" MaxLength="50" Role="TextRole.Password">
                <Feedback>
                    <ValidationError>无效密码。密码长度需在8-30字符之间，包含至少一个数字、一个小写字母、一个大写字母和一个特殊字符。</ValidationError>
                </Feedback>
            </TextEdit>
        </Validation>
    </Field>
</Fields>
<Fields>
    <Field ColumnSize="ColumnSize.Is6">
        <FieldLabel RequiredIndicator>确认密码</FieldLabel>
        <Validation Validator="@ConfirmPassword">
            <TextEdit @bind-Text="@User.ConfirmPassword" Placeholder="重新输入密码" MaxLength="50" Role="TextRole.Password">
                <Feedback>
                    <ValidationError>密码不匹配！</ValidationError>
                </Feedback>
            </TextEdit>
        </Validation>
    </Field>
</Fields>

@code {
const string passwordPattern = @"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,30}$";

    void ValidatePassword(ValidatorEventArgs e)
    {
        bool isMatch = Regex.IsMatch(Convert.ToString(e.Value), passwordPattern);
        e.Status = isMatch ? ValidationStatus.Success : ValidationStatus.Error;
    }

    void ConfirmPassword(ValidatorEventArgs e)
    {
        var confirmPassword = Convert.ToString(e.Value);
        bool isMatch = Regex.IsMatch(confirmPassword, passwordPattern);
        if (!isMatch)
        {
            e.Status = ValidationStatus.Error;
            e.ErrorText = "无效密码。密码长度需在8-30字符之间，包含至少一个数字、一个小写字母、一个大写字母和一个特殊字符。";
        }
        else if (confirmPassword != User.Password)
        {
            e.Status = ValidationStatus.Error;
        }
        else
        {
            e.Status = ValidationStatus.Success;
        }
    }
}

解决方案 #

要新增密码历史校验并保留原有逻辑，需利用Blazorise的异步验证能力（检查历史密码需调用服务器接口），具体调整如下：

1. 准备服务器校验服务

假设你已实现一个服务用于检查密码是否曾被使用，示例接口定义：

public interface IPasswordService
{
    Task<bool> IsPasswordUsedBeforeAsync(string userId, string password);
}

在组件中注入该服务：

@inject IPasswordService PasswordService

2. 修改密码验证方法为异步

将原同步验证方法改为异步，先执行格式校验，通过后调用服务器接口检查历史密码，动态设置错误文本：

const string passwordPattern = @"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,30}$";

async Task ValidatePassword(ValidatorEventArgs e)
{
    var password = Convert.ToString(e.Value);
    // 1. 原有格式校验
    bool isFormatValid = Regex.IsMatch(password, passwordPattern);
    if (!isFormatValid)
    {
        e.Status = ValidationStatus.Error;
        e.ErrorText = "无效密码。密码长度需在8-30字符之间，包含至少一个数字、一个小写字母、一个大写字母和一个特殊字符。";
        return;
    }

    // 2. 调用服务器检查密码是否曾被使用
    bool isPasswordUsed = await PasswordService.IsPasswordUsedBeforeAsync(User.Id, password);
    if (isPasswordUsed)
    {
        e.Status = ValidationStatus.Error;
        e.ErrorText = "该密码已被使用，请选择新密码。";
    }
    else
    {
        e.Status = ValidationStatus.Success;
    }
}

3. 调整Validation组件支持动态错误提示

Blazorise的Validation组件默认支持异步验证，只需将Validator绑定到异步方法，并把固定错误文本改为动态绑定@context.ErrorText：

<Fields>
    <Field ColumnSize="ColumnSize.Is6">
        <FieldLabel RequiredIndicator>密码</FieldLabel>
        <Validation Validator="@ValidatePassword">
            <TextEdit @bind-Text="@User.Password" Placeholder="输入密码" MaxLength="50" Role="TextRole.Password">
                <Feedback>
                    <ValidationError>@context.ErrorText</ValidationError>
                </Feedback>
            </TextEdit>
        </Validation>
    </Field>
</Fields>

4. 优化确认密码校验逻辑

保留原有校验逻辑，统一错误文本格式，同样改为动态绑定：

void ConfirmPassword(ValidatorEventArgs e)
{
    var confirmPassword = Convert.ToString(e.Value);
    bool isFormatValid = Regex.IsMatch(confirmPassword, passwordPattern);
    if (!isFormatValid)
    {
        e.Status = ValidationStatus.Error;
        e.ErrorText = "无效密码。密码长度需在8-30字符之间，包含至少一个数字、一个小写字母、一个大写字母和一个特殊字符。";
    }
    else if (confirmPassword != User.Password)
    {
        e.Status = ValidationStatus.Error;
        e.ErrorText = "密码不匹配！";
    }
    else
    {
        e.Status = ValidationStatus.Success;
    }
}

对应调整确认密码的Validation组件：

<Fields>
    <Field ColumnSize="ColumnSize.Is6">
        <FieldLabel RequiredIndicator>确认密码</FieldLabel>
        <Validation Validator="@ConfirmPassword">
            <TextEdit @bind-Text="@User.ConfirmPassword" Placeholder="重新输入密码" MaxLength="50" Role="TextRole.Password">
                <Feedback>
                    <ValidationError>@context.ErrorText</ValidationError>
                </Feedback>
            </TextEdit>
        </Validation>
    </Field>
</Fields>

5. 可选：添加校验加载状态

为提升用户体验，可在异步校验时显示加载提示：

<Validation Validator="@ValidatePassword">
    <TextEdit @bind-Text="@User.Password" Placeholder="输入密码" MaxLength="50" Role="TextRole.Password">
        <Feedback>
            <ValidationError>@context.ErrorText</ValidationError>
            <Loading IsVisible="@context.IsValidating">正在校验密码...</Loading>
        </Feedback>
    </TextEdit>
</Validation>

内容的提问来源于stack exchange，提问作者Age of Empires