电商网站欣赏百度自媒体平台

element plus中的form组件自带校验机制。在常规使用场景中，表单项是固定的、明确的，且数量不会太多。校验规则的使用也如下：

<template><div class="edit-page"><el-form :model="formModel" ref="formUser" label-position="top" label-width="auto" :inline="true":rules="rules"><el-row :gutter="20"><el-col :sm="24" :md="12"><el-form-item label="账号" prop="loginId"><el-input v-model="formModel.loginId" autocomplete="off clearable/></el-form-item></el-col></el-row></el-form></div>
</template><script setup>
....
const formModel = reactive({loginId:null
})const rules = reactive({loginId: [{required: true,message: '账号还未填写',trigger: 'blur'},{min: 2,max: 20,message: '账号长度应该为2-20',trigger: 'blur'}]
})
</script>

校验规则在代码块单独定义，规则的匹配遵循：rules对象中的属性名与el-form-item 中prop属性名一致。（当然校验规则也可以在el-form-item行内定义）

但对应动态生成的el-form-item 如何增加校验规则呢？改用行内定义，具体方法如下：

<el-form-item :prop="xx"   :rules="{required: true, message: 'Please input Activity name', trigger: 'blur'}">....</el-form-item>

这里要重点说明prop的设置，这是给动态表单项增加校验的关键所在。

由于是动态生成表单项，所以代码可能如下

<el-form :model="arry"><template v-for="(item,index) in arry" :key="index"><el-form-item :prop="'['+index+'].name" :rules="{required: true,message: '名称还未填写',trigger: 'blur'}"><el-input v-model="item.name"></el-form-item></template>

代码说明：arry是数组类型的响应式对象如：

const arry=ref([{name:'a'},{name:'b'}])

这个arry可能是从后台接口返回的数据。所以由该数据生成的表单项是动态的。

根据推测，校验机制可能是这样的：

1.对于每个表单项要能确定其使用的校验规则，这个基本在定义阶段就可以确定下来（行内定义校验规则；或者单独定义且保证规则名与prop值一致）；

2.在应用校验规则时要能获取到表单项的当前值。而表单项的当前值我们一般用v-model指令绑定到响应式数据对象上了。所以只要能取到对应的响应式数据即可。

这就体现prop属性的第二个作用了，定位响应数据的访问路径。（第一个作用是匹配校验规则）

通过<el-form :model="arry">    与  <el-form-item :prop="'['+index+'].name"> 中的 model属性值+prop属性值组合："arry['"+index+'].name" 来确定数据访问路径。

这里可能会有疑问，为什么不能像<el-input v-model="">那样用v-for迭代过程中的变量，如上代码中的item来写:prop="item.name"。v-for及迭代变量item是渲染界面时用的。渲染完，item就不存在，不能访问了。而我们的校验是在渲染完后才启用的。必须保证后面阶段也能访问到对应数据。index渲染完也是不可访问的。只是上面的写法相当于把index当时的值固化下来了，是后面也能访问到。用的是字符串拼接来引用index，相当于闭包的作用。只要符合这样的机制，访问路径即便更复杂，比如双重迭代。也是可以使用自带校验的。

优化：上面介绍的规则定义是放在<el-form-item>行内定义的，在有些场景下，比如：一张大的填报报表，都是需要输入大于0的数值的。当然上面的表单项本身是动态生成的，手写规则的地方也不算多。为了验证猜想，及优化代码。能不能定义一个规则函数，将这个函数设置给 :rules属性。经过实验是可以的。

const ruleFloat=(msg)=>{return {pattern:/^\d+(\.\d+)?$/,message:`${msg}应为大于0的数值`,trigger:'blur'}}

而使用地方改为如下：

<el-form-item :rules="ruleFloat('身高')">

这样使用校验规则既满足了动态表单的需求，也最大限度地减少代码。

最后一点，在报表填报中，是不适合在输入框附近显示校验失败信息的。改为浮动弹框提示比较好。如用ElMessage.error('xx')。具体实现方式如下：

在<el-form>上设置属性，:show-message="false" 即关闭文本信息显示，增加校验事件处理函数@validate（每个表单项验证时都会触发该事件）

<el-form :show-message="false"  @validate="onValidate">

在处理函数中根据函数参数（prop,isValid,message）进行弹窗提示，详情看官方文档。

最后提交数据时，一般会调用表单对象的验证方法，这个方法会再对每个表单项进行验证，如有未验证通过的，会依次触发@validate事件，也就依次弹窗提示，体验不是很好。可以只弹一次给个笼统点的提示，如：还有校验未通过的数据，请先修改。此时可以设置个开关量，当个表单项输入时可以开启弹窗提示，提交表单时，就不用一个个提示了。