element 结合vue 在表单验证时有值却提示错误的解决办法


Posted in Javascript onJanuary 22, 2018

绑定的值与规则指定的值一定要相同-------

第一步:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

加上rules ref

第二部:

<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

加上prop

第三部:

rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
}

这里加了required的话 prop的屁股后面就不用加了;这里其他的详细验证看文档

第四部:点击提交表单

(这里有一个地方切记,<el-button type="primary" @click="submitForm('ruleForm')">提交表单</el-button>这里一定要引号引起来,搞定

submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {

这里是验证成功后该干嘛干嘛

} else {
console.log('error submit!!');
return false;
}
});
},

总结

以上所述是小编给大家介绍的element 结合vue 在表单验证时有值却提示错误的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
You might like
用php和MySql来与ODBC数据连接
2006/10/09 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
总结Python编程中函数的使用要点
2016/03/20 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python3 mmh3安装及使用方法
2019/10/09 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
python实现猜拳游戏
2020/03/04 Python
python算的上脚本语言吗
2020/06/22 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
初二学生评语大全
2014/12/26 职场文书
学习经验交流会策划书
2015/11/02 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL