解决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实现的一个图片滚动切换
Jun 21 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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环境――Appserv
2006/12/13 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
对python中的logger模块全面讲解
2018/04/28 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python生成大写32位uuid代码
2020/03/03 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
新闻记者个人求职的自我评价
2013/11/28 职场文书
酒店副总岗位职责
2013/12/24 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js