解决vue+ element ui 表单验证有值但验证失败问题
更新时间：2020年01月16日 08:34:46 作者：ExcuMe
这篇文章主要介绍了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保持一致
2.在data{}里面没有声明变量也会导致验证失败，使获取的值value值为undefined。
总结
以上所述是小编给大家介绍的解决vue+ element ui 表单验证有值但验证失败问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要为大家详细介绍了vue实现移动端图片裁剪上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
桑基图是一种用于直观显示流向数据的可视化工具,特别适合展示复杂的网络关系和资源流动,在前端项目中,通过结合 Vue 3 和 ECharts,可以快速实现交互性强、样式美观的桑基图,本文将通过完整的代码示例,带你一步步完成一个桑基图的实现,需要的朋友可以参考下2025-01-01
本文介绍了三种使用Vue实现动态数字动画的方案：使用Vue的响应式数据与`setInterval`逐步更新数字,通过Vue的动画API和CSS动画效果为数字增加过渡效果,以及使用更高效的`requestAnimationFrame`来提供更加流畅的动画表现,每种方案都详细说明了原理、实现步骤和代码示例2025-02-02
这篇文章主要介绍了解决vue addRoutes不生效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue3使用useMouseInElement实现图片局部放大预览效果实例代码
现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能,下面这篇文章主要给大家介绍了关于vue3使用useMouseInElement实现图片局部放大预览效果的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
本文主要介绍了Vue.js的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了vue+iview 实现可编辑表格的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于uniapp嵌套webview无法返回上一级的解决方式,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue2 轮播图slide组件实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
最新评论