表单和数据注释验证

最新推荐文章于 2024-08-21 08:33:50 发布

flyingdream123

最新推荐文章于 2024-08-21 08:33:50 发布

阅读量233

点赞数

分类专栏： Blazor

本文链接：https://blog.csdn.net/flyingdream123/article/details/108935969

版权

Blazor 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

这是一个关于使用EditForm和DataAnnotations进行表单验证的Blazor应用示例。用户需输入标题、slug和内容，所有字段均为必填，slug长度限制为16字符。当表单验证通过后，会显示提交的信息。

摘要由CSDN通过智能技术生成

@page "/editforms"
<h3>Edit Forms and Validation</h3>

<EditForm Model="BlogPostModel" OnValidSubmit="HandleValidSubmit">
    @*将数据注释验证信息注入到表单控件*@
    <DataAnnotationsValidator/>

    <div class="row mt-4">
        <label for="title">Title</label>
        <InputText id="title" @bind-Value="BlogPostModel.Title" class="form-control"></InputText>
    </div>
    <div class="row mt-4">
        <label for="slug">Slug</label>
        <InputText id="slug" @bind-Value="BlogPostModel.Slug" class="form-control"/>
    </div>
    <div class="row mt-4" >
        <InputTextArea @bind-Value="BlogPostModel.Content" class="form-control" rows="10"/>
    </div>
    <div class="row mt-4">
        <button type="submit" class="btn btn-primary">Publish</button>
    </div>

    @*显示验证错误信息*@
    <div class="row mt-4">
        <ValidationSummary/>
    </div>

</EditForm>

@code {
    //BlogPostModel为视图的模型对象
    //注意：必须new一个实例，否则无法显示视图
    protected BlogPost BlogPostModel { get; set; } = new BlogPost();

    protected void HandleValidSubmit()
    {//提交且验证成项后，处理表单
        
        Console.WriteLine("valid submit!");
        Console.WriteLine("Your title: " + BlogPostModel.Title);
        Console.WriteLine("Your slug: " + BlogPostModel.Slug);
        Console.WriteLine("Your content: " + BlogPostModel.Content);
    }

}

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorApp3
{
    public class BlogPost
    {
        [Required(ErrorMessage ="标题不能为空")]
        public string Title { get; set; }

        [Required]
        [StringLength(16,ErrorMessage ="Slug is too long (16 character limit).")]
        public string Slug { get; set; }

        [Required]
        public string Content { get; set; }
    }
}