解决vue+ element ui 表单验证有值但验证失败问题


Posted in Javascript onJanuary 16, 2020

一.如图:有值但是验证失败

解决vue+ element ui 表单验证有值但验证失败问题

二.

<el-form :model="form" :rules="rules">
<el-form-item label="数据模板" prop="template" >
 <el-col :span="20">
  <el-input type="textarea" v-model="form.template" :rows="8" placeholder="请输入数据模板" :readonly="true" ></el-input>
 </el-col>
</el-form-item>
</el-form>
export default {
data() {
 return {
  form: {
   template: null
  }
  rules: [
   template:{required: true, message: '数据模板不能为空', trigger: 'blur'}
  ]
 }
}
}

以上是正确的验证例子。

三.

目前碰到两种情况会导致验证失败,而且使用自定义验证形式的时候发现value的值为undefined:

1.prop和v-model的值名称不一致

           1必须和2名称保持一致,3处的变量也需和2处的prop保持一致

解决vue+ element ui 表单验证有值但验证失败问题

   2.在data{}里面没有声明变量也会导致验证失败,使获取的值value值为undefined。

解决vue+ element ui 表单验证有值但验证失败问题

总结

以上所述是小编给大家介绍的解决vue+ element ui 表单验证有值但验证失败问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
You might like
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python如何提升爬虫效率
2020/09/27 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
初中生三年学习生活的自我评价
2013/11/03 职场文书
平面设计岗位职责
2013/12/14 职场文书
企业消防安全制度
2014/02/02 职场文书
货车司机岗位职责
2014/03/18 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2014年建筑工作总结
2014/11/26 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书