2

这是一个使用 blazor 和 MudBlazor 框架创建的简单注册表单。

在此处输入图像描述

下面你可以看到注册表格的代码部分。

登记。剃刀

@using System.ComponentModel.DataAnnotations

<div style="max-width: 400px;">
<EditForm Model="@model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudCard>
        <MudCardContent>
            <MudTextField Label="First name" HelperText="Max. 8 characters"
                          @bind-Value="model.Username" For="@(() => model.Username)" @onkeydown="@keydown"/>
            <MudTextField Label="Email" Class="mt-3"
                          @bind-Value="model.Email" For="@(() => model.Email)" @onkeydown="@keydown"/>
            <MudTextField Label="Password" HelperText="Choose a strong password" Class="mt-3"
                          @bind-Value="model.Password" For="@(() => model.Password)" InputType="InputType.Password" @onkeydown="@keydown"/>
            <MudTextField Label="Password" HelperText="Repeat the password" Class="mt-3"
                          @bind-Value="model.Password2" For="@(() => model.Password2)" InputType="InputType.Password" @onkeydown="@keydown"/>
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto">Register</MudButton>
        </MudCardActions>


     </MudCard>
        <MudText Typo="Typo.body2" Align="Align.Center" Class="my-4">
            Fill out the form correctly to see the success message.
        </MudText>

        <MudExpansionPanels>
            <MudExpansionPanel Text="Show Validation Summary">
                @if (success)
                {
                    <MudText Color="Color.Success">Success</MudText>
                }
                else
                {
                    <MudText Color="@Color.Error">
                        <ValidationSummary />
                    </MudText>
                }
            </MudExpansionPanel>
        </MudExpansionPanels>
    </EditForm>
    </div>

    @code {

     [Inject] 
     protected IJSRuntime JsRuntime { get; set; } 

    RegisterAccountForm model = new RegisterAccountForm();
    bool success;

    public class RegisterAccountForm
    {
    [Required]
    [StringLength(8, ErrorMessage = "Name length can't be more than 8.")]
    public string Username { get; set; }

    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [StringLength(30, ErrorMessage = "Password must be at least 8 characters long.", MinimumLength = 8)]
    public string Password { get; set; }

    [Required]
    [Compare(nameof(Password))]
    public string Password2 { get; set; }

}

private void OnValidSubmit(EditContext context)
{
    success = true;
    StateHasChanged();
}
public void keydown() 
{ 
   
        @*what should I include here??*@
    
} 

}

现在我要在这个表单中添加回车键自动化。

要求-

  1. 向一个字段添加一些值并按下回车按钮后，光标应聚焦在相邻的空字段上以添加值。

例如：-在名字字段中添加任何名称并按回车键后，光标指针应自动聚焦在电子邮件字段上（如果电子邮件字段为空）。

  1. 在上述过程中，如果发现一个字段已被填写，请忽略它并继续下一个字段。

例如：如果我们认为光标指针在First Name字段上且Email字段已填写但密码部分尚未填写的情况。然后在按下回车键后，而不是移动到电子邮件字段，忽略电子邮件字段并且光标指针应该集中在密码字段上以输入折扣。

  1. 添加所有字段并按回车按钮后，首先验证数据，然后提交所有数据。

我需要使用 blazor 添加以上 3 个部分以添加到我的表单中。如果有人知道如何做到这一点，请帮助我。我非常感谢您的所有帮助。

4

0 回答 0