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

相关推荐
想你依然心痛8 分钟前
AtomCode 在前端开发中的实战体验:React + TypeScript 项目开发实录
前端·react.js·typescript
疯狂的魔鬼12 分钟前
精确计算容器剩余视口高度:useAutoContainerFullHeight 的工程实践
前端·css·typescript
用户0595401744620 分钟前
用了 3 个月 ChatGPT,才发现它一直在遗忘——用 Playwright 自动化验证记忆存储一致性
前端·css
玄玄子20 分钟前
xss前端解决方案
前端·浏览器·xss
林希_Rachel_傻希希22 分钟前
web性能优化之——AI总结视频
前端·javascript·面试
前端炒粉29 分钟前
个人简历面经总结二
前端·网络·vue.js·react.js·面试
用户0595401744642 分钟前
用了半年 LangChain Memory,才发现回滚测试压根没测对
前端·css
木木的木云1 小时前
从零构建微前端框架:PavilionMfe 设计揭秘
前端·架构·vite
weedsfly1 小时前
Cookie 安全三属性:HttpOnly、Secure、SameSite 分别防什么?
前端·javascript·面试
IT_陈寒1 小时前
SpringBoot自动配置没生效?你可能漏了这个注解
前端·人工智能·后端