Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

（1）网络上搜索VeeValidate的安装使用，大多数会提示：①安装，npm install vee-validate；②在main.js中引入，import VeeValidate from ‘vee-validate’；③在main.js中安装插件，Vue.use( VeeValidate)或app.use( VeeValidate)。实际上，在Vue3，只要①就可以了。估计是Vue3引入组合式API之后，VeeValidate也是以组合式API的方式引入。如果是Vue2，可能还是需要三步来引入。

（2）完成①后，直接在组件中import就可以使用相关组件或API，以组件式为例：import { Field, Form, ErrorMessage } from 'vee-validate'

（3）VeeValidate官方推荐结合yup来使用。yup可以理解为验证函数的语法糖，如下例所示（使用组件方式）。yup需要另外安装，npm install yup；然后在组件中引入，import * as yup from ‘yup’。我们后面的案例，均使用更简单的验证方式yup。

//函数验证和yup验证方式的对比
//【特别说明一下】：以往我们使用HTML表单组件，都需要v-model逻辑层的响应式数据，但在VeeValidate里，你找不到了
//帮我们托管了，数据也可以通过API拿到！

//字段级验证




//表单级验证

2、VeeValidate的组合式API使用

VeeValidate起头的API主要有两个，useField和useForm。从字面就知道，一个是关于字段的，一个是关于表单的。

1）useField：const{ value, errorMessage } = useField('fieldName', yup.string().required().min(8))

①接受：字段name、字段级的验证方法、字段级初始值等入参

②export：字段value、错误信息errorMessage、字段元信息meta、值变化处理函数handleChange、字段重置resetField等一大堆API。使用对象解构的方式来接收，大多数解构出来的值，也是响应式。

2）useField：useForm:const{ handleSubmit, isSubmitting } = useForm()

①接受：表单级验证方法对象、表单级初始值对象等入参

②export：表单提交handleSubmit、提交状态isSubmitting、表单元信息meta等一大堆API。使用对象解构的方式来接收，大多数解构出来的值，也是响应式。

3）如上所述，VeeValidate的使用套路很简单，直来直去的三步走，入参-解构拿API-使用API

 4）下面来个大例子，大多数API都有涉及和讲解，很全了哦！！！

三、Blazor的表单验证：EditForm

Blazor自带验证体系，使用起来非常方便，一般的验证功能都能实现，如果想实现更复杂的逻辑，也可以进一步深入。有几点需要说明：

1、需要使用Blazor自带的一整套组件，包括等，进阶的话，也可以继承InputBase自己开发

2、验证的基本过程：

1）表单组件初始化后，会创建一个EditContext对象，这是表单的上下文，不仅以键值对的方式保存着各个字段的元信息，还提供了一系列方法

2）这个EditContext以CascadingValue联级的方式提供给表单组件使用

3）每次有数据更新时，触发验证，并创建一个新的EditContext，验证结果会保存到一个ValidationMessageStore

3、如果表单组件绑定了集合或复杂类型，将无法验证。这个时候有一个实验性的组件可以使用，

4、接下来和Vue一样，直接干一个实例！！！

class="container">
    //EditForm的Model属性，可以直接绑定employee对象，这里绑定editContext的原因是为了拿到EditContext上下文
    //提交表单的三种情况：OnValidSubmit-验证成功回调、OnInValidSubmit-验证失败回调、OnSubmit-无论成功或失败均回调
    //OnValidSubmit和OnInValidSubmit可以一起使用
    "@editContext" OnValidSubmit="@MyValidSubmit">

        //启动验证
        

        //表单级验证信息的容器
        

        
class=content50>
            *姓名：
            "name" @bind-Value="employee.Name">
            //字段级验证信息容器
            employee.Name) />
        

        
class="content50">
            *性别：
            "employee.Sex">
                "@Sex.male">male
                "@Sex.female">female
            
        

        
class="content50">
            *年龄：
            "employee.Age">
        

        
class="content50">
            *学历：
            "employee.Graduate">
                "@Graduate.primary">primary
                "@Graduate.middle">middle
                "@Graduate.high">high
                "@Graduate.university">university
            
        

        
class="content50">
            是否已婚：
            "employee.IsMarriage">
        

        
class="content50">
            入职日期：
            "employee.EntryDate">
        

        
class="content100">
            爱好：
            "employee.Likes">
                "@Like.football">football
                "@Like.basketball">basketball
                "@Like.swim">swim
                "@Like.code">code
            
        

        
class="content100">
            自我介绍：
            "employee.Introduce">
        
        

        "submit">提交

    


@code {
    private Employee employee = new Employee();
    private EditContext? editContext;
    protected override void OnInitialized()
    {
        editContext = new EditContext(employee);
    }

    private void MyValidSubmit()
    {
        Console.WriteLine("验证通过，提交表单");
    }

    //表单绑定的对象，直接标注验证规定和错误信息，非常好用
    //这个类还可以前后端共享
    private class Employee
    {
        [Required(ErrorMessage = "姓名必填")]
        [MaxLength(20, ErrorMessage = "最长20字")]
        public string? Name { get; set; } = null; //姓名

        [Required(ErrorMessage = "性别必填")]
        public Sex? Sex { get; set; } = null; //性别

        [Required(ErrorMessage = "年龄必填")]
        [Range(18, 60, ErrorMessage = "只能填18-60岁")]
        public int Age { get; set; } //年龄

        [Required]
        public Graduate Graduate { get; set; } = Graduate.Null;//学历

        public bool IsMarriage { get; set; } //是否已婚

        [DataType(DataType.Date)]
        public DateTime EntryDate { get; set; } //入职日期

        [Required, MinLength(1, ErrorMessage = "最少选1个"), MaxLength(3, ErrorMessage = "最多选3个")]
        public Like[] Likes { get; set; } = new[] { Like.basketball }; //爱好

        [MaxLength(300, ErrorMessage = "最长300字")]
        public string? Introduce { get; set; } //自我介绍

    }
    //Employee对象用到的枚举类型
    private enum Sex{ male,female }
    private enum Like{ football,basketball,swim,code }
    private enum Graduate{ Null,primary,middle,high,university }
}