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

相关推荐
Elcker17 分钟前
JAVA-Web 项目研发中如何保持团队研发风格的统一
java·前端·javascript
selectDele44 分钟前
Solid.js和React的比较
前端·javascript·react.js·solid.js
小旋风012341 小时前
前端对接豆包AI(vue2版本)
前端·人工智能
—Qeyser1 小时前
Flutter AppBar 导航栏组件完全指南
前端·javascript·flutter
Amumu121381 小时前
React扩展(一)
前端·javascript·react.js
cypking1 小时前
三、前端规范化 项目代码规范
前端·代码规范
xkxnq2 小时前
第二阶段:Vue 组件化开发(第 28天)
前端·javascript·vue.js
Yvonne爱编码2 小时前
前端工程化进阶:从搭建完整项目脚手架到性能优化【技术类】
前端·状态模式
cypking2 小时前
二、前端规范化 遇到的问题及解决方案
前端
小范馆2 小时前
STM32F03C8T6通过AT指令获取天气API
前端·javascript·stm32