Vue中使用ElementUI组件Form组件的校验validate

先准备一些el-form元素 这里面el-form中:model(v-bind:model)是单项绑定的,如果你写成了v-model=""可能会出现校验没有效果的情况。

这是校验过后的结果了

现在开始使用下吧!

1.在el-form中绑定一个ref,名字自拟,后续触发检验结果需要使用到它

2.准备rules对象,里面装校验的内容

3.需要校验的元素上需要加上prop,这个是对应校验的内容的。注意的是 如果是双向绑定的如(input)的prop的名字必须和绑定的元素名字一样,比如我的收集数据为SkuForm.skuName那么prop值为skuName就好了,否则有可能校验不起来

相关推荐
杨先生哦22 分钟前
2026 热端攻防:AI 驱动 Web 前端安全全景透析
前端·笔记·安全·web安全
李白的天不白25 分钟前
SmartAdmin(基于 Spring Boot 框架)中配置跨域请求 VUE3 设置请求头
java·前端
一个被程序员耽误的厨师27 分钟前
01-设计篇-我用前端那一套手艺造了一个AI-Native工具
前端·ai-native
不吃糖葫芦339 分钟前
vue3实现拓扑图编辑功能(谨以此纪念我当前的最后一份前端工作)
前端
大家的林语冰1 小时前
超越 TypeScript,Flow 强势回归,语法高仿 TS,功能更丰富,类型更安全!
前端·javascript·typescript
এ慕ོ冬℘゜1 小时前
jQuery 高可用多图上传组件(企业级封装 + 踩坑全解 + 可直接上线)
前端·javascript·jquery
爱勇宝1 小时前
AI 时代,前端工程师的话语权正在下降?
前端·后端
kymjs张涛1 小时前
一个月,纯VibeCoding,全平台云笔记APP
前端·javascript·后端
巴勒个啦1 小时前
esbuild 插件实战:5个真实场景带你自定义构建流水线
前端·angular.js