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 相关文章推荐
jquery each()源代码
Feb 14 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
教你一步步实现一个简易promise
Nov 02 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过滤XSS攻击的函数
2013/11/12 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
django1.11.1 models 数据库同步方法
2018/05/30 Python
Django实现文件上传下载功能
2019/10/06 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
人力资源主管职责范本
2014/03/05 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
2014年统计工作总结
2014/11/21 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2016年寒假生活小结
2015/10/10 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS