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

相关推荐
太平洋月光15 分钟前
AI 快捷指令:Cursor Rules · Commands · Skills
前端·ai编程
用户831348593069817 分钟前
Cesium 实现行政区反向遮罩镂空效果(自定义暗色蒙层+矢量/影像底图切换)
vue.js·webgl·cesium
默_笙19 分钟前
😁 LLM 不知道的事它不会说"不知道",而是会"编"——RAG 就是让它闭嘴先查资料
前端·javascript
stringwu20 分钟前
用 LangGraph 落地飞书 Bug 自动修复 Agent 实践
前端
Revolution6120 分钟前
变量提升到底提升了什么:为什么 var 是 undefined,let 却直接报错
前端·javascript
Revolution6125 分钟前
本地明明正常,为什么 CI 又挂了:一次前端构建失败的排查过程
前端·前端工程化
太平洋月光32 分钟前
stagewise如何结合cursor开发
前端·ai编程
前端Hardy33 分钟前
JavaScript 终于又进化了!ES2026 正式发布,这些新特性你必须知道!
前端
光影少年34 分钟前
react navite 页面跳转、传参、路由监听、导航栏自定义
前端·react native·react.js
黑土豆1 小时前
CSS 新特性:Container Queries 到底能解决什么痛点?
前端·css