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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
浅析PHP Socket技术
2013/08/02 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
深入浅析python继承问题
2016/05/29 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python logging日志模块原理及操作解析
2019/10/12 Python
tornado+celery的简单使用详解
2019/12/21 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
妇科医生自荐信
2013/11/05 职场文书
优秀求职信
2014/05/29 职场文书
学校督导评估方案
2014/06/10 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
公司租房协议书
2014/10/14 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis