解决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 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
js实现简单进度条效果
Mar 25 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
PHP define函数的使用说明
2008/08/27 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
urllib2自定义opener详解
2014/02/07 Python
python装饰器深入学习
2018/04/06 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
python归并排序算法过程实例讲解
2020/11/04 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
介绍信如何写
2015/01/31 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
毕业证明书
2015/06/19 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL