验证码 (Captcha)

前端图片验证码组件。

概述

基于Canvas实现
字母不区分大小写
点击图片可刷新验证码

代码演示

1.默认示例

namespace WebSite.Docus.Inputs.Captchas;

class Captcha1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Captcha>("Captcha", true)
               .Set(f => f.Placeholder, "验证码")
               .Build();
    }
}

2.验证示例

namespace WebSite.Docus.Inputs.Captchas;

class Captcha2 : BaseComponent
{
    private Captcha? captcha;
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<Captcha>("Captcha", true)
               .Set(f => f.Placeholder, "验证码")
               .Build(value => captcha = value);

        builder.Button("验证", Callback(OnCheck), StyleType.Primary);
        builder.Div("tips", message);
    }

    private void OnCheck() => captcha?.Validate(out message);
}