Vue Element校验validate
官方文档
- 限制输入指定类型
添加type限制即可,type包括以下值:
例子:
rules: {bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ],associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ],associateData: [ { required: true, type: 'url', message: '输入合法的链接', trigger: 'change' } ]
}
复制代码
- 限定输入字符串的长度
用min和max加以限制,element validate具体某个值后的限制规则是个数组,可以添加多个限制。
例子:
rules: {rewardReason: [{ required: true, message: '请输入加分原因', trigger: 'blur' },{ max: 500, message: '不得超过500字符' }]
}
复制代码
- 限定输入的数值介于某两个值之间,即限定最大和最小输入
也是通过min和max限定的,但是发现直接用不行,查了下输入的时候el-input的v-model要加.number限制,即v-model.number。例子:
<el-input v-model.number="form.rewardToLevel" style="display: inline;" placeholder="请输入等级数字" type="number"></el-input>rules: {rewardReason: [{ required: true, message: '请输入加分原因', trigger: 'blur' },{ max: 500, message: '不得超过500字符' }]
}
复制代码
Vue Element校验validate相关推荐
- vue+element项目 手机号、邮箱校验 保姆级教程
vue+element项目 手机号.邮箱校验 保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验 标题先说注意点 prop黄色框框起来的一定要有 废话不多 ...
- vue+element ui表单校验(邮箱、电话、工商信息)
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
- vue+element实现银行卡号只输入数字,四个补一个空位,并实现校验
vue+element实现银行卡号只输入数字,四个补一个空位,并实现校验 html 输入框只输入数字 watch 监听实现四个数字补一个空位 自定义卡号校验规则 html 输入框只输入数字 // ty ...
- Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证 首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后 官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新)
vue+element 实现 试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现 试卷答题功能,单选题 ,多选题,判断题,简答 ...
- vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上图 界面效果图 下面直接上代码: <template><div class="loginbody&q ...
最新文章
- MFC中快速应用OpenCV(转)
- R语言使用pROC包在同一图中绘制两条ROC曲线并通过假设检验检验ROC曲线的AUC或者偏AUC的差异(输出p值)
- flex Scroller
- 2021 NOI游记
- c# 执行js的方法
- springboot雪花算法的生成
- 讨论一下c++中由外部os向主线程中传入参数的问题
- 飞思卡尔单片机c语言编程详解,主流16位单片机学习详解:飞思卡尔MC9S12G系列...
- 如何给Mac电脑的磁盘进行分区?
- AI人工智能(调包侠)速成之路十四(中国象棋AI网络机器人:AI技术综合应用实现)
- 时域采样定理MATLAB实现
- 开源项目推荐:office办公软件,绘图软件
- 解决jinja2模板中包含大括号的情况
- 服务器资源下载简单实现
- android 执行bin文件是什么意思,将可执行文件复制到android中的system / bin
- 据说,2021年Apple将推出1416英寸MacBook Pro
- LeetCode #121 买卖股票的最佳时机 贪心 单调栈 动态规划
- Android_adb_Wifi_无线调试,脱离数据线/
- python输入esc退出循环_按ESC键退出while循环【C/C++】
- win10使用python的strftime有错误_win10系统提示werfault.exe应用程序错误如何解决
热门文章
- 畅通工程(kruskal算法)
- 前端开发面试题-JavaScript(二)
- SQL Server 2014新特性探秘(1):内存数据库
- java中判断字符串是否为纯数字
- There has been an error processing your request[magento1.6]
- allavsoft mac版:支持从各种视频分享网站下载视频
- Eclipse中 Clean 的时候总是警告 org.apache.catalina.webresources.Cache backgroundProcess
- NSTimer 的正确用法你真的知道吗?
- iOS底层探索之多线程(十七)——通过 Swift的Foundation源码分析锁(NSLock、NSCondition、NSRecursiveLock)
- 如何使用EasyRecovery巧妙恢复被误删的办公文档?