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

相关推荐
徐小夕1 小时前
被CRUD拖垮的第5年,我用Cursor 一周"复仇":pxcharts-vue开源,一个全栈老兵的AI编程账本
前端·vue.js·github
Wect3 小时前
LeetCode 39. 组合总和:DFS回溯解法详解
前端·算法·typescript
Wect3 小时前
LeetCode 46. 全排列:深度解析+代码拆解
前端·算法·typescript
IT_陈寒3 小时前
Vite 凭什么比 Webpack 快50%?揭秘闪电构建背后的黑科技
前端·人工智能·后端
hi大雄3 小时前
我的 2025 —— 名为《开始的勇气》🌱
前端·年终总结
从文处安3 小时前
「前端何去何从」一直写 Vue ,为何要在 AI 时代去学 React?
前端·react.js
aircrushin4 小时前
OpenClaw“养龙虾”现象的社会技术学分析
前端·后端
明君879974 小时前
#Flutter 的官方Skills技能库
前端·flutter
yuki_uix4 小时前
重新认识 React Hooks:从会用到理解设计
前端·react.js
林太白4 小时前
ref和reactive对比终于学会了
前端