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

相关推荐
阿猫的故乡9 小时前
Vue插槽从入门到项目实战:默认插槽、具名插槽、作用域插槽,一次讲明白
前端·javascript·vue.js
SEO-狼术9 小时前
Build Interactive Maps Crack
前端
小则又沐风a9 小时前
进程最终篇---进程控制(模拟实现xshell)
java·linux·服务器·前端
Invictus_cl9 小时前
条纹圆形进度条(彩虹色)
开发语言·前端·javascript
excel9 小时前
从封装到继承:深入理解 TypeScript 类中的 public、private、protected、static
前端
向日的葵0069 小时前
vue3路由的replace属性(四)
前端·javascript·vue.js·vue路由
杨超越luckly9 小时前
Agent应用指南:利用GET请求获取理想汽车门店位置信息
前端·python·html·汽车·可视化
阿猫的故乡9 小时前
Vue模板引用和组件暴露:ref拿DOM、defineExpose调方法,案例多到眼花
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员10 小时前
从Electron到Tauri,Rust+Vue(Tauri) 实现超高性能桌面日志应用开发,以及开发避坑指南
vue.js·rust·electron
小雨下雨的雨15 小时前
井字棋AI机器人实现详解 - Minimax算法实战-鸿蒙PC Electron框架完成
前端·人工智能·算法·华为·electron·鸿蒙