element 结合vue 在表单验证时有值却提示错误的解决办法
绑定的值与规则指定的值一定要相同-------
第一步:
<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 在表单验证时有值却提示错误的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
您可能感兴趣的文章:
- vuejs+element-ui+laravel5.4上传文件的示例代码
- Vue+Element使用富文本编辑器的示例代码
- Vue ElementUI之Form表单验证遇到的问题
- vue 2.0项目中如何引入element-ui详解
- Vue2.0+ElementUI实现表格翻页的实例
相关推荐
-
vue 2.0项目中如何引入element-ui详解
前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)
-
Vue ElementUI之Form表单验证遇到的问题
首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再
-
Vue2.0+ElementUI实现表格翻页的实例
ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q
-
vuejs+element-ui+laravel5.4上传文件的示例代码
前言 之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件 我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q
-
Vue+Element使用富文本编辑器的示例代码
富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件 <!-- 组件代码如下 --> <template> <div> <script id="editor"
-
element 结合vue 在表单验证时有值却提示错误的解决办法
绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na
-
解决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
-
策略模式实现 Vue 动态表单验证的方法
策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法.关键是策略的 实现和使用分离 . 注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const.箭头函数.rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~ 1. 你曾
-
vue实现表单验证小功能
本文实例为大家分享了vue实现表单验证的具体代码,供大家参考,具体内容如下 1.路由跳转 先点开Vue项目中src目录配置router文件然后用import暴露你的表单页名称并在你的Router实例中中注册路由表代码如下 import Create from "@/views/create/create.vue"; //前面是暴露的名字,首字母要用大写.后面是你的表单页所在目录@是..的简写即返回上一层 const router=new Router({ mode:"hist
-
vue+vue-validator 表单验证功能的实现代码
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能,具体代码如下所示: 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
vue.js表单验证插件(vee-validate)的使用教程详解
综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.
-
element表单验证如何清除校验提示语
目录 问题场景: 解决方案: 1. 对字段进行单独校验 2. 直接清除表单域下该字段的提示信息 问题场景: 最近在进行项目开发的时候,遇到了这样的一个问题: 对表单域中的数据进行校验的时候,其中有一项比较特殊,不是简单的输入框,下拉框这些表单元素,而是自己写的一个el-table的选择弹窗,我对它的校验如如下: protocolId: [ { required: true, message: '请选择解析协议', trigger: 'blur'}, ], 这样可以实现校验功能,但是会存在一个问题
-
jquery表单验证实例仿Toast提示效果
HTML内容部分 <div class="classname"> <label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/> <input type="text" /> --> </div> 提示html及样式部分 <div id="e
-
jQuery 表单验证插件formValidation实现个性化错误提示
其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&
-
Ajax提交Form表单页面仍会刷新问题的快速解决办法
搞了半天原来点击提交按钮 少加了个type="button" 原来是 <form > <button id="sub" /> </form> 结果怎么弄都会刷新页面,加上就好了 PS:form 表单中存在button时ajax提交后自动刷新问题 //在记一个坑(刚学前台,不是很懂,项目中自己给自己挖了个坑,哈哈...) <form class="form-horizontal"> &l
随机推荐
- PowerShell中定义哈希散列(Hash)和调用例子
- Jquery下EasyUI组件中的DataGrid结果集清空方法
- 前端自动化开发之Node.js的环境搭建教程
- 超级给力的JavaScript的React框架入门教程
- 用vbs实现禁用服务
- Python实现定时任务
- vs2010无法打开项目文件的原因分析及解决方法
- PHP Ajax JavaScript Json获取天气信息实现代码
- Python中的异常处理相关语句基础学习笔记
- jsp实现从服务器下载xls文件到客户端的方法
- J2ee 高并发情况下监听器实例详解
- jquery控制背景音乐开关与自动播放提示音的方法
- MySQL一个语句查出各种整形占用字节数及最大最小值的实例
- javascript中setAttribute兼容性用法分析
- yahoo首页伸缩效果代码
- C# 调用Delphi dll 实例代码
- Android购物车项目快速开发
- php.ini中的request_order推荐设置
- python图像和办公文档处理总结
- MFC实现学生选课系统