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

相关推荐
daols8816 分钟前
vue 表格组件 vxe-table 实现虚拟滚动与无需滚动加载
vue.js·vxe-table
雪芽蓝域zzs20 分钟前
第18章:ECharts 折线图 + 标记点、标记线,自定义 tooltip
vue.js·echars
沙蒿同学33 分钟前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端
甜到心里的蛋糕1 小时前
加解密技术详解:纯前端如何实现 AES / SM4 / RSA / 国密 SM2
前端·密码学
拖孩1 小时前
代码我能全交给 AI,流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
雪芽蓝域zzs1 小时前
第24章:ECharts 地图组件(基础行政区地图,若依 Vue3)
vue.js·echars
2601_963870211 小时前
基于SSM的特产代购系统
java·前端
paopaokaka_luck1 小时前
智慧社区综合服务小程序(人脸识别、AI问答、Echarts图形化分析)
前端·javascript·spring boot·spring·数据分析·echarts
烈风逍遥2 小时前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web2 小时前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码