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


二.
 <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保持一致

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

 
 
 

vue踩坑:vue+ element ui 表单验证有值但验证失败。的更多相关文章

  1. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  2. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  3. nodejs querystring踩坑笔记----只能用于表单提交

    API中的实例: var http = require('http'); var querystring = require('querystring'); var postData = querys ...

  4. (vue.js)element ui 表单重置

    el-form需要接收一个model,并且需要配合el-form-item一起使用,并且在el-form-item上绑定prop属性,resetField方法才能好使. <el-form :mo ...

  5. Vue踩坑日记-Element this.$message 找不到模块

    在使用Vue.js的 Element框架时,无法使用Message组件 浏览器提示:找不到组件 原始写法: this.$message({ message: '恭喜你,这是一条成功消息', type: ...

  6. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  7. vue踩坑之旅 -- computed watch

    vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...

  8. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  9. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

随机推荐

  1. Linux高级系统恢复技术

    一,MBR毁坏: 查看系统分区在那: 毁坏MBR: 如果没有重启动,可以直接恢复: 如果重启之后就不可启动系统,需要恢复系统: 出现这样的情况: force off关机,使用光盘启动,添加一个镜像光盘 ...

  2. linux内核编译 fatal error: openssl/opensslv.h: No such file or directory

    ubuntu下缺少了的组件,安装即可: sudo apt-get install libssl-dev

  3. A——奇怪的玩意(POJ1862)

      题目: 我们的化学生物学家发明了一种新的叫stripies非常神奇的生命.该stripies是透明的无定形变形虫似的生物,生活在果冻状的营养培养基平板菌落.大部分的时间stripies在移动.当他 ...

  4. CSS选择器有哪几种?举例轻松理解CSS选择器

    CSS选择器汇总(清爽版) 1.元素选择器 标签名{ } 2.id选择器 #id属性值{ } 3.类选择器 ·class属性值{ } 4.选择器分组(并集选择器) 作用:通过它可以同时选中多个选择器对 ...

  5. 学习分享--python网络爬虫(一)关于如何更新python pip以及如何安装python requests库

    一.python pip的更新(我的是window10 界面可能不太一样)    1.找到电脑左下角开始按钮,并点击: 2.输入cmd 3.打开以后,先查看自己的pip版本  输入:pip -V 敲回 ...

  6. linux中find文件搜索命令

    find 解释 命令名称:find 命令所在路径:/bin/find 执行权限:所有用户 功能描述:文件搜索 语法 find [搜索范围] [匹配条件] 匹配条件: -name 文件名(区分大小写) ...

  7. SAP Basis DEBUG改表数据权限角色设计

    SAP Basis DEBUG改表数据权限角色设计 项目实践中,因种种原因不得不要通过debug才能解决一些特定的问题,所以就涉及到了debug权限角色的定义了. DEBUG的权限,无非就是: 1)数 ...

  8. Linux Samba文件共享服务,安装与案例配置

    Samba服务器安装和配置 1:安装Samba服务器软件包 [root@localhost ~]# rpm -qa | grep samba [root@localhost ~]# yum -y in ...

  9. IBM x3250m5安装redhat 6.5 加载raid卡驱动

    原文地址:http://www.i5i6.net/post/118.html 1. 下载对应raid卡驱动 for redhat6.5 x64(如本次x3250 m5 c100阵列卡驱动 lsi_dd ...

  10. python——面向对象(1),基础

    """面向对象:抽象化编程思想.类,对象:用类来创建(实例化)对象.类:一系列特征和行为相同的事物总和, 1.属性:特征 2.行为:方法 定义类 :PEP 8要求标识符的 ...