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

相关推荐
GISer_Jing1 分钟前
React全解析:从入门到精通实战指南
前端·react.js·前端框架
码路人2 分钟前
src-components调用链与即时聊天组件树
vue.js
happymaker06262 分钟前
web前端学习日记——DAY07(js交互编程)
前端·javascript·学习
码路人3 分钟前
Home双router-view与布局切换逻辑
vue.js
lizi665 分钟前
uniapp uview-plus 自定义动态验证
前端·vue.js·微信小程序
尘世中一位迷途小书童5 分钟前
npm 包入口指南:package.json 中的 main、module、exports
前端·javascript·架构
●VON6 分钟前
Flutter 入门指南:从基础组件到状态管理核心机制
前端·学习·flutter·von
踩着两条虫12 分钟前
VTJ.PRO 在线应用开发平台概览
前端·vue.js·人工智能
西西学代码18 分钟前
Flutter---SingleChildScrollView
前端·javascript·flutter
ZTLJQ26 分钟前
构建现代Web应用:Python全栈框架完全解析
前端·数据库·python