Blazor中的HTML5验证

@page "/form-validation"

<h3>Form Validation</h3>

<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required maxlength="50" @bind="name" />
        <span class="error-message" style="color: red;">@nameErrorMessage</span>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required @bind="email" />
        <span class="error-message" style="color: red;">@emailErrorMessage</span>
    </div>
    <button type="submit">Submit</button>
</form>

@code {
    private string name = "";
    private string email = "";
    private string nameErrorMessage = "";
    private string emailErrorMessage = "";

    private async Task SubmitForm()
    {
        if (!string.IsNullOrEmpty(nameErrorMessage) || !string.IsNullOrEmpty(emailErrorMessage))
        {
            return;
        }

        // 处理表单提交逻辑
    }

    private void OnNameInput(ChangeEventArgs e)
    {
        name = e.Value.ToString();
        nameErrorMessage = string.IsNullOrEmpty(name) ? "Name is required." : "";
    }

    private void OnEmailInput(ChangeEventArgs e)
    {
        email = e.Value.ToString();
        emailErrorMessage = string.IsNullOrEmpty(email) ? "Email is required." : "";
    }
}