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就好了,否则有可能校验不起来

相关推荐
stringwu4 分钟前
Flutter GetX 核心坑及架构选型与可替换性方案
前端·flutter
耗子君QAQ5 分钟前
为什么 AI 写代码也需要说明书?
前端·javascript·ai编程
h_65432105 分钟前
公告/消息提示从右向左循环滚动vue
前端·javascript·vue.js
Lyyaoo.6 分钟前
JWT 令牌(待更新)
java·前端·javascript
weixin_436777879 分钟前
el-select的label没有没有反显怎么办?
开发语言·前端·javascript
米丘14 分钟前
vue3.x 编译 script setup 编译过程
vue.js·node.js·babel
暗不需求16 分钟前
React项目架构深度解析:从0到1理解现代前端工程化
前端·javascript·react.js
Lkstar16 分钟前
读懂 Vue3 响应式源码:从枚举到 Proxy 拦截器
vue.js
孙凯亮16 分钟前
Electron 项目终极实战总结:从黑屏踩坑到自动更新全流程
前端·electron
jiayong2318 分钟前
第 40 课:任务详情抽屉里的编辑 / 删除联动强化
java·开发语言·前端·javascript·vue.js·学习