Vue Element校验validate的实例


Posted in Javascript onSeptember 21, 2020

官方文档

限制输入指定类型

添加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-ui 的validate方法

validate()时elment-ui封装好的用于对整个表单进行验证

validate的参数是一个回调函数。该回调函数在校验结束后被调用,是否校验成功和未通过校验的字段。

若不传入回调函数,则会返回以promise

参数:Function( callback : Function( boolean,obj ) )

Vue Element校验validate的实例

isPass是布尔值,为true时表示校验通过。

Vue Element校验validate的实例

调用validate()校验时,需要prop属性绑定校验项的字段名,如上图所示。

如果prop属性不绑定name这个字段名,表单校验时,不会校验变量ruleForm.name 的值。

以上这篇Vue Element校验validate的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象 对象(Object)
May 13 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
javascript学习小结之prototype
Dec 03 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
vue3.0 上手体验
Sep 21 #Javascript
微信小程序实现点击页面出现文字
Sep 21 #Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 #Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 #Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 #Javascript
You might like
php懒人函数 自动添加数据
2011/06/28 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php实现计数器方法小结
2015/01/05 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
详解python中的装饰器
2018/07/10 Python
Django 路由系统URLconf的使用
2018/10/11 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Python实现微信表情包炸群功能
2021/01/28 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
化工专业应届生求职信
2013/11/08 职场文书
促销活动策划方案
2014/01/12 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
windows系统搭建WEB服务器详细教程
2022/08/05 Servers