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

相关推荐
天天向上1024几秒前
vue2 el-table使用css的方式实现列表自动滚动
css·vue.js·elementui
We་ct6 分钟前
LeetCode 427. 建立四叉树:递归思想的经典应用
前端·算法·leetcode·typescript·dfs·深度优先遍历·分治
小年糕是糕手7 分钟前
【35天从0开始备战蓝桥杯 -- 补充包】
开发语言·前端·数据结构·数据库·c++·算法·蓝桥杯
摸鱼的春哥13 分钟前
Agent教程20:更适合编程工具的记忆方案——情景摘要
前端·javascript·后端
牛奶8 小时前
AI辅助开发最佳实践:2026年新方法
前端·aigc·ai编程
C澒9 小时前
微前端容器标准化:公共能力标准化
前端·架构
Setsuna_F_Seiei9 小时前
AI 对话应用之 JS 的流式接口数据处理
前端·javascript·ai编程
英俊潇洒美少年9 小时前
react如何实现 vue的$nextTick的效果
javascript·vue.js·react.js
青柠代码录10 小时前
【Vue3】Vue Router 4 路由全解
前端·vue.js
无限大610 小时前
《AI观,观AI》:专栏总结+答疑|吃透核心,解决你用AI的所有困惑
前端·后端