专门做民宿的网站,重庆网站建设优化,手机网页页面设计模板,深圳最出名的50家公司element plus中的form组件自带校验机制。在常规使用场景中#xff0c;表单项是固定的、明确的#xff0c;且数量不会太多。校验规则的使用也如下#xff1a;
templatediv classedit-pageel-form :modelformModel reffor…element plus中的form组件自带校验机制。在常规使用场景中表单项是固定的、明确的且数量不会太多。校验规则的使用也如下
templatediv classedit-pageel-form :modelformModel refformUser label-positiontop label-widthauto :inlinetrue:rulesrulesel-row :gutter20el-col :sm24 :md12el-form-item label账号 proploginIdel-input v-modelformModel.loginId autocompleteoff clearable//el-form-item/el-col/el-row/el-form/div
/templatescript 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 :propxx :rules{required: true, message: Please input Activity name, trigger: blur}..../el-form-item
这里要重点说明prop的设置这是给动态表单项增加校验的关键所在。
由于是动态生成表单项所以代码可能如下
el-form :modelarrytemplate v-for(item,index) in arry :keyindexel-form-item :prop[index].name :rules{required: true,message: 名称还未填写,trigger: blur}el-input v-modelitem.name/el-form-item/template
代码说明arry是数组类型的响应式对象如
const arryref([{name:a},{name:b}])
这个arry可能是从后台接口返回的数据。所以由该数据生成的表单项是动态的。
根据推测校验机制可能是这样的
1.对于每个表单项要能确定其使用的校验规则这个基本在定义阶段就可以确定下来行内定义校验规则或者单独定义且保证规则名与prop值一致
2.在应用校验规则时要能获取到表单项的当前值。而表单项的当前值我们一般用v-model指令绑定到响应式数据对象上了。所以只要能取到对应的响应式数据即可。
这就体现prop属性的第二个作用了定位响应数据的访问路径。第一个作用是匹配校验规则
通过el-form :modelarry 与 el-form-item :prop[index].name 中的 model属性值prop属性值组合arry[index].name 来确定数据访问路径。
这里可能会有疑问为什么不能像el-input v-model那样用v-for迭代过程中的变量如上代码中的item来写:propitem.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 :rulesruleFloat(身高)
这样使用校验规则既满足了动态表单的需求也最大限度地减少代码。
最后一点在报表填报中是不适合在输入框附近显示校验失败信息的。改为浮动弹框提示比较好。如用ElMessage.error(xx)。具体实现方式如下
在el-form上设置属性:show-messagefalse 即关闭文本信息显示增加校验事件处理函数validate每个表单项验证时都会触发该事件
el-form :show-messagefalse validateonValidate
在处理函数中根据函数参数prop,isValid,message进行弹窗提示详情看官方文档。
最后提交数据时一般会调用表单对象的验证方法这个方法会再对每个表单项进行验证如有未验证通过的会依次触发validate事件也就依次弹窗提示体验不是很好。可以只弹一次给个笼统点的提示如还有校验未通过的数据请先修改。此时可以设置个开关量当个表单项输入时可以开启弹窗提示提交表单时就不用一个个提示了。
