解决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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
语义化 H1 标签
Jan 14 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
详解php反序列化
2020/06/10 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
js Function类型
2011/12/04 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
python常用运维脚本实例小结
2020/02/14 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
介绍一下Linux中的链接
2016/06/05 面试题
求职信格式范本
2013/11/15 职场文书
小学生打架检讨书
2014/01/26 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
理财学专业自荐书
2014/06/28 职场文书
助学贷款贫困证明
2014/09/23 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Nginx下配置Https证书详细过程
2021/04/01 Servers
MySQL开启事务的方式
2021/06/26 MySQL