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的键盘控制事件说明
Apr 15 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
基于Vue单文件组件详解
Sep 15 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
JavaScript如何操作css
Oct 24 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
加强版phplib的DB类
2008/03/31 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python线程优先级队列知识点总结
2021/02/28 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
优秀求职信范文分享
2014/01/26 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
国庆节活动总结
2014/08/26 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python