这是基础部分的最后一章，内容比较简单，算是为基础部分来个HappyEnding。我们分三个部分来学习：
表单输入绑定
Vue的表单验证：VeeValidate
Blazor的表单验证：EditForm
一、表单输入绑定
表单输入主要涉及前面章节的双向绑定，但不需要我们自定义，直接使用就行。如果已经掌握了“1.6章节双向绑定”，那这部分的知识点简直“洒洒水”。Vue的v-model指令，为所有原生的HTML组件做了一些特殊处理，不仅支持双向绑定，也支持check或radio的分组。而Blazor，对原生HTML并没有做特殊处理，所以实现起来比较麻烦（见下例）。对于Blazor，推荐直接使用内置的表单组件，不仅可以直接双向绑定，还支持验证。以下例子，为原始HTML标签的绑定。
//Vue
//以下代码展示多行文本框、单行文本框、单行文本框-去空格、单行文本框-数字、复选框、多选框、单选框、单选选择器、多选选择器的基本使用 <template>
//多行文本框：
<textarea v-model="textareaMsg" placeholder="请输入"></textarea>
<span>逻辑层值：{{textareaMsg}}</span> //单行文本框：
<input type="text" v-model="inputMsg" placeholder="请输入" />
<span>逻辑层值：{{inputMsg}}</span> //单行文本框-去空格：
<input type="text" v-model.trim="inputMsgTrim" placeholder="请输入" />
<span>逻辑层值：{{inputMsgTrim}}</span> //单行文本框-数字：
<input type="number" v-model.number="inputNumber" placeholder="请输入" />
<span>逻辑层值：{{inputNumber}}</span> //复选框：
<input type="checkbox" id="checkbox" v-model="isCheck" />
<label for="checkbox">{{isCheck?"已选状态":"未选状态"}} </label>
<span>逻辑层值：{{isCheck}}</span> //多选框：
<input type="checkbox" id="vuecheck" value="vue" v-model="checkValue" />
<label for="vuecheck">vue</label>
<input type="checkbox" id="blazorcheck" value="blazor" v-model="checkValue" />
<label for="blazorcheck">blazor</label>
<span>逻辑层值：{{checkValue}}</span> //单选框：
<input type="radio" id="vueradio" value="vue" v-model="radioValue" />
<label for="vueradio">vue</label>
<input type="radio" id="blazorradio" value="blazor" v-model="radioValue" />
<label for="blazorradio">blazor</label>
<span>逻辑层值：{{radioValue}}</span> //单选选择器：
<select v-model="oneSelected">
<option disabled value="">请选择</option>
<option>vue</option>
<option>blazor</option>
</select>
<span>逻辑层值：{{oneSelected}}</span> //多选选择器：
<select v-model="moreSelected" multiple>
<option>vue</option>
<option>blazor</option>
</select>
<span>逻辑层值：{{moreSelected}}</span>
</template> <script setup>
import {ref} from 'vue'
const textareaMsg = ref('') //多行文本框，字符串
const inputMsg = ref('') //单行文本框，字符串
const inputMsgTrim = ref('') //单行文本框-去空格，字符串
const inputNumber = ref() //单行文本框-数字，数值
const isCheck = ref(false) //单选框，布尔
const checkValue = ref([]) //多选框，数组
const radioValue = ref('') //单选框，字符串
const oneSelected = ref('') //单选选择器，字符串
const moreSelected = ref([]) //多选选择器，数组
</script>
//Blazor
//Blazor的@bind对check和rado的分组，并没有做出特殊处理 <div class="content">
多行文本框：
<textarea @bind="textareaMsg" @bind:event="oninput"></textarea>
<h6>逻辑层值：@textareaMsg</h6>
</div> <div class="content">
单行文本框：
<input @bind="inputMsg" @bind:event="oninput" />
<h6>逻辑层值：@inputMsg</h6>
</div> <div class="content">
单行文本框-去空格：
<input @bind="InputTrimMsg" @bind:event="oninput" />
<h6>逻辑层值：@InputTrimMsg</h6>
</div> <div class="content">
单行文本框-数字：
<input type="number" @bind="inputNumber" @bind:event="oninput" />
<h6>逻辑层值：@inputNumber</h6>
</div> <div class="content">
复选框：
<input type="checkbox" id="isChecked" @bind="isChecked" />
<label for="isChecked">选中</label>
<h6>逻辑层值：@(isChecked?"选中状态":"未选状态")</h6>
</div> //多选框，无法使用@bind。通过双向绑定的属性和事件来实现【后面补充一种使用@bind的实现方式】
<div class="content">
多选框：
<input type="checkbox" id="vuecheck" name="moreLikeCodes" value="@moreLikeCodes" @onchange=Vuecheck />
<label for="vuecheck">vue</label>
<input type="checkbox" id="blazorcheck" name="moreLikeCodes" value="@moreLikeCodes" @onchange=Blazorcheck />
<label for="blazorcheck">blazor</label>
<h6>逻辑层值：@(String.Join(",", moreLikeCodes.ToArray()))</h6>
</div> //单选框，无法使用@bind。通过双向绑定的属性和事件来实现【后面补充一种使用@bind的实现方式】
<div class="content">
单选框：
<input type="radio" id="vueradio" name="oneLikeCode" value="@oneLikeCode" @onchange=@(()=>{oneLikeCode="vue";}) />
<label for="vueradio">vue</label>
<input type="radio" id="blazorradio" name="oneLikeCode" value="@oneLikeCode" @onchange=@(()=>{oneLikeCode="blazor";}) />
<label for="blazorradio">blazor</label>
<h6>逻辑层值：@oneLikeCode</h6>
</div> <div class="content">
单选选择器：
<select @bind="singleSelected">
<option value="">请选择</option>
<option value="vue">vue</option>
<option value="blazor">blazor</option>
</select>
<h6>逻辑层值：@singleSelected</h6>
</div> @code { private string textareaMsg = "";
private string inputMsg = "";
public int inputNumber { get; set; } //通过设置set，实现去除空格功能
private string inputTrimMsg = "";
public string InputTrimMsg
{
get { return inputTrimMsg; }
set { inputTrimMsg = value.Trim(); }
} private bool isChecked; //多选框
private List<string> moreLikeCodes = new List<string>();
private void Vuecheck(ChangeEventArgs e)
{
if (Convert.ToBoolean(e.Value))
{
moreLikeCodes.Add("vue");
}
else
{
moreLikeCodes.Remove("vue");
}
}
private void Blazorcheck(ChangeEventArgs e)
{
if (Convert.ToBoolean(e.Value))
{
moreLikeCodes.Add("blazor");
}
else
{
moreLikeCodes.Remove("blazor");
}
} //单选框
private string? oneLikeCode;
//单选下拉框
private string? singleSelected;
}
//Blazor
//补充另外一种实现多选框的方式，直接用@bind指令 @if (selectedLikeCodes is not null)
{
foreach (var item in selectedLikeCodes)
{
<input type="checkbox" @bind="@item.IsSelected" />
<span>@item.Name</span>
} <h5>我喜欢的代码:</h5>
@foreach (var item in selectedLikeCodes.Where(c => c.IsSelected))
{
<div>@item.Name</div>
}
} @code { private List<LikeCode> selectedLikeCodes = new List<LikeCode>(); private List<LikeCode> likeCodeItems = new List<LikeCode>
{
new LikeCode{Name="vue",IsSelected=false},
new LikeCode{Name="blazor",IsSelected=false},
new LikeCode{Name="maui",IsSelected=false}
}; protected override void OnInitialized()
{
selectedLikeCodes = likeCodeItems.Select(e => new LikeCode { Name = e.Name, IsSelected = e.IsSelected }).ToList();
} private class LikeCode
{
public string? Name;
public bool IsSelected;
}
}
二、Vue的表单验证：VeeValidate
Vue没有内置表单验证功能，官方推荐使用第三方库VeeValidate。而Blazor，封装了一套内置表单组件，自带验证功能，我们主要学习这套组件的使用。本章节关于表单验证的知识点，均只涉及基本的使用，关于进一步的深入使用、理解、甚至定制扩展功能，我们将在进阶学习中继续展开。
1、VeeValidate的安装、组件式的简单使用
VeeValidate实现表单验证有两种方式，一种是组件式，主要使用<Form>和<Field>；另外一种是组合式API的方式，可以和其它表单组件更好融合，是更推荐的方式，后面的学习也以此为主。特别说一下VeeValidate的安装，有些坑，如下所示：
（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里，你找不到了
//<Form>帮我们托管了，数据也可以通过API拿到！ //字段级验证
<template>
<Form>
<Field name="field" :rules="isRequired" />
<ErrorMessage name="field" />
</Form>
</template>
<script setup>
import { Field, Form, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
//函数验证方式，value为字段输入值
function isRequired(value){
if (value && value.trim()){
return ture
}
return 'This is required'
}
//yup验证方式
const isRequired = yup.string().required()
</script> //表单级验证
<template>
<Form @submit="submit" :validation-schema="mySchema">
<Field name="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button>Submit</button>
</Form>
</template>
<script setup>
import { Field, Form, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
//函数验证方式
const mySchema = {
email(value) {
//验证规则...
},
password(value){
//验证规则...
}
}
//yup验证方式
const mySchema = yup.object({
email: yup.string().required().email(),
password: yup.string().required().min(8),
})
</script>
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都有涉及和讲解，很全了哦！！！
<template>
<form @submit="onSubmit">
<div class="content50">
*姓名：
<input v-model="name" />
<span>{{nameError}}</span>
</div>
<div class="content50">
*性别：
<input type="radio" id="sexmale" value="1" name="sex" v-model="sex" />
<label for="sexmale">男</label>
<input type="radio" id="sexfemale" value="0" name="sex" v-model="sex" />
<label for="sexfemale">女</label>
<span>{{sexError}}</span>
</div>
<div class="content50">
*年龄：
<input type="number" v-model="age" />
<span>{{ageError}}</span>
</div>
<div class="content50">
是否已婚：
<input type="checkbox" v-model="marriage" />
<span>{{marriageError}}</span>
</div>
<div class="content50">
学历：
<select v-model="graduate">
<option value="" disabled>请选择</option>
<option value="小学">小学</option>
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
<span>{{graduateError}}</span>
</div>
<div class="content50">
入职日期：
<input type="date" v-model="entrydate" />
<span>{{entrydateError}}</span>
</div>
<div class="content50">
爱好：
<input type="checkbox" id="likebasketball" value="basketball" v-model="likes" />
<label for="likebasketball">basketball</label>
<input type="checkbox" id="likefootball" value="football" v-model="likes" />
<label for="likefootball">football</label>
<input type="checkbox" id="likeswim" value="swim" v-model="likes" />
<label for="likeswim">swim</label>
<input type="checkbox" id="likecode" value="code" v-model="likes" />
<label for="likecode">code</label>
<span>{{likesError}}</span>
</div>
<div class="content50">
自我介绍（使用handleChange，失焦时才触发验证，改变验证的敏感性）：
<textarea @change="handleChange" :value="introduce"></textarea>
<span>{{introduceError}}</span>
</div>
<input type="submit" />
</form> <div class="content200">
<h3>表单所有字段值</h3>
<h6>{{values}}</h6>
<h3>表单所有错误信息</h3>
<h6>{{errors}}</h6>
</div>
</template> <script setup>
import {ref} from 'vue'
import { useForm,useField } from 'vee-validate';
import * as yup from 'yup'; // 不需要声明以下响应式变量，这些工作由Vee隐式完成
// const name = ref('')
// const sex = ref()
// ....... //1、表单设置===============================================================================
//1.1初始值，可以省略，但未了控制“多选框”的数组绑定，需要设置
const initialValues = {
likes:[],
}
//1.2初始错误，首次验证错误时显示，可以省略，错误信息应该在多语言里设置，此篇文章略过，大家可以去查文档
const initialErrors ={
name:'姓名必填，且不能超过20字',
}
//1.3验证规则，核心
const validationSchema = yup.object({
name:yup.string().required().max(20),
sex:yup.number().required().integer().min(0).max(1),
age:yup.number().required().integer().min(0).max(100),
marriage:yup.boolean(),
graduate:yup.string(),
introduce:yup.string().min(50),
entrydate:yup.date(), })
//1.4表单useForm
//入参：validationSchema-验证规则，initialValues-初始值，initialErrors-首次验证错误时显示
//API①：values-表单各字段值，errors-表单验证错误信息
//API②：handleSubmit-表单验证成功后回调，isSubmitting-验证进度，submitCount-验证次数
//API③：resetForm-表单重置，不入参则以初始值重置，可以对象方式以指定值重置
//API④：setValues-以对象方式设置表单各字段值，setFieldValue-单独设置指定字段值，入参为字段名和值
//API⑤：setErrors-以对象方式设置表单各字段错误信息，setFieldError-单独设置指定字段错误信息，入参为字段名和错误信息
const { values,errors,handleSubmit,isSubmitting,submitCount,resetForm,setValues,setFieldValue,setErrors,setFieldError } = useForm({
validationSchema: validationSchema,
initialValues: initialValues,
initialErrors: initialErrors,
}) //2、字段设置===============================================================================
//字段useField
//入参：字段名称【注，入参的第二个参数可以设置验证规则，如useField('name',yup.string().required())，但一般在表单层级上统一设置】
//API①：value-绑定字段(值为ref响应式,用computedRef包装),errorMessage-错误信息
//API②：handleChange-Vee的验证只根据字段值变化响应，和DOM事件无关。handleChange可以将DOM事件与验证响应关联，从而改变验证响应的时机
const {value:name,errorMessage:nameError} = useField('name')
const {value:sex,errorMessage:sexError} = useField('sex')
const {value:age,errorMessage:ageError} = useField('age')
const {value:marriage,errorMessage:marriageError} = useField('marriage')
const {value:graduate,errorMessage:graduateError} = useField('graduate')
const {value:entrydate,errorMessage:entrydateError} = useField('entrydate')
const {value:likes,errorMessage:likesError} = useField('likes')
const {value:introduce,errorMessage:introduceError,handleChange} = useField('introduce') //3、表单行为===============================================================================
//提交表单：验证成功的处理和验证失败的处理
//第一个参数：验证成功回调，入参为表单数据
//第二个参数：验证失败回调，入参为表单数据、错误信息、验证结果
//验证成功后，调用API，resetForm()，重置表单
const onSubmit = handleSubmit((values)=>{
console.log("发送表单数据"+values)
resetForm(); //重置表单
},(values,errors,results)=>{
console.log("表单数据"+values)
console.log("错误信息"+errors)
console.log("验证结果"+results)
}) </script>
三、Blazor的表单验证：EditForm
Blazor自带验证体系，使用起来非常方便，一般的验证功能都能实现，如果想实现更复杂的逻辑，也可以进一步深入。有几点需要说明：
1、需要使用Blazor自带的一整套组件，包括<EditForm><InputText>等，进阶的话，也可以继承InputBase<T>自己开发
2、验证的基本过程：
1）表单组件初始化后，会创建一个EditContext对象，这是表单的上下文，不仅以键值对<FileIdentifier,FieldState>的方式保存着各个字段的元信息，还提供了一系列方法
2）这个EditContext以CascadingValue联级的方式提供给表单组件使用
3）每次有数据更新时，触发验证，并创建一个新的EditContext，验证结果会保存到一个ValidationMessageStore
3、如果表单组件绑定了集合或复杂类型，将无法验证。这个时候有一个实验性的组件可以使用，<ObjectGraphDataAnnotationsValidator />
4、接下来和Vue一样，直接干一个实例！！！
<div class="container">
//EditForm的Model属性，可以直接绑定employee对象，这里绑定editContext的原因是为了拿到EditContext上下文
//提交表单的三种情况：OnValidSubmit-验证成功回调、OnInValidSubmit-验证失败回调、OnSubmit-无论成功或失败均回调
//OnValidSubmit和OnInValidSubmit可以一起使用
<EditForm Model="@editContext" OnValidSubmit="@MyValidSubmit"> //启动验证
<DataAnnotationsValidator/> //表单级验证信息的容器
<ValidationSummary/> <div class=content50>
*姓名：
<InputText id="name" @bind-Value="employee.Name"></InputText>
//字段级验证信息容器
<ValidationMessage For=@(()=>employee.Name) />
</div> <div class="content50">
*性别：
<InputRadioGroup @bind-Value="employee.Sex">
<InputRadio Value="@Sex.male">male</InputRadio>
<InputRadio Value="@Sex.female">female</InputRadio>
</InputRadioGroup>
</div> <div class="content50">
*年龄：
<InputNumber @bind-Value="employee.Age"></InputNumber>
</div> <div class="content50">
*学历：
<InputSelect @bind-Value="employee.Graduate">
<option value="@Graduate.primary">primary</option>
<option value="@Graduate.middle">middle</option>
<option value="@Graduate.high">high</option>
<option value="@Graduate.university">university</option>
</InputSelect>
</div> <div class="content50">
是否已婚：
<InputCheckbox @bind-Value="employee.IsMarriage"></InputCheckbox>
</div> <div class="content50">
入职日期：
<InputDate @bind-Value="employee.EntryDate"></InputDate>
</div> <div class="content100">
爱好：
<InputSelect @bind-Value="employee.Likes">
<option value="@Like.football">football</option>
<option value="@Like.basketball">basketball</option>
<option value="@Like.swim">swim</option>
<option value="@Like.code">code</option>
</InputSelect>
</div> <div class="content100">
自我介绍：
<InputTextArea @bind-Value="employee.Introduce"></InputTextArea>
</div>
<br />
<button type="submit">提交</button> </EditForm>
</div> @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 }
}
