これは、MudBlazor フレームワークで blazor を使用して作成された単純な登録フォームです。
次に、Register フォームのコード部分を示します。
登録。かみそり
@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??*@
}
}
次に、このフォームに Enter キーの自動化を追加します。
要件-
- 1 つのフィールドに値を追加して Enter ボタンを押した後、値を追加するには、カーソル ポインターを隣接する空のフィールドにフォーカスする必要があります。
例: -名前フィールドに任意の名前を追加して Enter キーを押すと、カーソル ポインターは自動的に電子メール フィールドにフォーカスされます(電子メールフィールドが空の場合)。
- 上記のプロセス中に、1 つのフィールドが既に入力されていることが判明した場合は、それを無視して次のフィールドに進む必要があります。
例: カーソル ポインターが [名]フィールドにあり、[電子メール]フィールドは既に入力されているが、パスワード部分はまだ入力されていないような状況であると考えられる場合。次に、Enter キーを押した後、メール フィールドに移動する代わりに、メールフィールドを無視し、カーソル ポインターをパスワードフィールドにフォーカスして割引を入力する必要があります。
- すべてのフィールドを追加して入力ボタンを押した後、最初にデータを検証し、すべてのデータを送信する必要があります。
ブレザーを使用してフォームに追加するには、上記の 3 つの部分を追加する必要があります。誰かがこれを行う方法を知っているなら、私を助けてください。皆様のご協力に感謝いたします。