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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
详解用Webpack与Babel配置ES6开发环境
Mar 12 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 前一天或后一天的日期
2008/06/28 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
express的中间件bodyParser详解
2014/12/04 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python对字典进行排序实例
2014/09/25 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
产品质量承诺书范文
2014/03/27 职场文书
班长竞选演讲稿
2014/04/24 职场文书
社区义诊活动总结
2014/04/30 职场文书
地质灾害防治方案
2014/05/14 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
人民的好儿女观后感
2015/06/18 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL