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


二.
 <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. 浅谈单利模式及其应用场景(Python)

    python 中的单利模式 使用场景: + Python的logger就是一个单例模式,用以日志记录 + Windows的资源管理器是一个单例模式 + 线程池,数据库连接池等资源池一般也用单例模式 + ...

  2. CodeForces 429B Working out DP

    E - Working out Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Su ...

  3. gcd综合

    问题: 如果正整数大于了1000有什么影响? 1.递推式gcd: int gcd(int a,int b) { ) { int c=a%b; a=b; b=c; } return a; } 2.递归式 ...

  4. java的异常体系 及强制转换

    一,异常 1.常见的几种异常: StackOverFlow  栈溢出错误:写递归函数的时候,没有定义递归结束的条件. ArrayIndexOutofBounds   数组越界:如新new一个数组,in ...

  5. 小白学 Python 数据分析(9):Pandas (八)数据预处理(2)

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  6. 利用Graphics的截图功能CopyFromScreen

    该方式是直接对屏幕进行截图操作 UserControl chartContainPanel = new UserControl(); Graphics graph = chartContainPane ...

  7. Java日志介绍(3)-Logback

    Logback 继承自Log4j,它建立在有十年工业经验的日志系统之上.它比其它所有的日志系统更快并且更小,包含了许多独特并且有用的特性. 1.配置 1.1.加载配置 Logback能够在初始化期间自 ...

  8. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  9. MySQL的JDBC驱动(8.0版本)

    1.引用外部库  mysql-connector-java-8.0.版本的jar 2.jdbc驱动类:com.mysql.jdbc.Driver  改成 com.mysql.cj.jdbc.Drive ...

  10. Redis-异步消息

    关于异步消息,大家都知道,如下: 这些用起来都是比较复杂的,RabbitMQ先要创建Exchange,在创建Queue,还要将Queue和Exchange通过某种规则绑定起来.发消息之前要指定rout ...