element 结合vue 在表单验证时有值却提示错误的解决办法


Posted in Javascript onJanuary 22, 2018

绑定的值与规则指定的值一定要相同-------

第一步:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

加上rules ref

第二部:

<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>

加上prop

第三部:

rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
}

这里加了required的话 prop的屁股后面就不用加了;这里其他的详细验证看文档

第四部:点击提交表单

(这里有一个地方切记,<el-button type="primary" @click="submitForm('ruleForm')">提交表单</el-button>这里一定要引号引起来,搞定

submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {

这里是验证成功后该干嘛干嘛

} else {
console.log('error submit!!');
return false;
}
});
},

总结

以上所述是小编给大家介绍的element 结合vue 在表单验证时有值却提示错误的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
js本地图片预览实现代码
Oct 09 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
原生js实现简单轮播图
Oct 26 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 #Javascript
vue 项目常用加载器及配置详解
Jan 22 #Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
You might like
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
canvas时钟效果
2017/02/16 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python rstrip()方法实例详解
2018/11/11 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
主管会计岗位职责
2014/03/13 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2014年实习期工作总结
2014/11/27 职场文书
导游词之桂林
2019/08/20 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
前端JavaScript大管家 package.json
2021/11/02 Javascript
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android