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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JQuery工具函数汇总
Jun 15 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
如何在 Vue 中使用 JSX
Feb 14 Vue.js
基于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
thinkphp实现数组分页示例
2014/04/13 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
动态创建类实例代码
2009/10/07 Python
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
烹调加工管理制度
2014/02/04 职场文书
教师一岗双责责任书
2014/04/16 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
中学清明节活动总结
2014/07/04 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
小学生暑假生活总结
2015/07/13 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
pytorch Dropout过拟合的操作
2021/05/27 Python
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Nginx实现负载均衡的项目实践
2022/03/18 Servers