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

相关推荐
豆豆(设计前端)5 分钟前
在 Vue 项目中快速引入和使用 ECharts
vue.js
yqcoder11 分钟前
Commander 一款命令行自定义命令依赖
前端·javascript·arcgis·node.js
前端Hardy27 分钟前
HTML&CSS :下雪了
前端·javascript·css·html·交互
醉の虾34 分钟前
VUE3 使用路由守卫函数实现类型服务器端中间件效果
前端·vue.js·中间件
程序边界44 分钟前
AIGC时代下的Vue组件开发深度探索
vue.js
码上飞扬1 小时前
Vue 3 30天精进之旅:Day 05 - 事件处理
前端·javascript·vue.js
火烧屁屁啦2 小时前
【JavaEE进阶】应用分层
java·前端·java-ee
程序员小寒2 小时前
由于请求的竞态问题,前端仔喜提了一个bug
前端·javascript·bug
赵不困888(合作私信)3 小时前
npx和npm 和pnpm的区别
前端·npm·node.js
很酷的站长4 小时前
一个简单的自适应html5导航模板
前端·css·css3