Iview 表单提交: Cannot read property 'validate' of undefined
提交表单时,提示报这个错,找了半天,然后也百度了很久,一直没找到答案,代码如下:
<link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" />
<link href="~/css/login.css" rel="stylesheet" />
<link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" />
<link href="~/css/iconfont.css" rel="stylesheet" />
<div class="login" id="login">
<div class="login-con">
<Card icon="log-in" title="欢迎登录" :bordered="false">
<div class="form-con">
<template>
<i-form :model="formInline" :rules="ruleInline" ref="formInline" inline>
<Form-Item prop="user">
<i-input type="text" v-model="formInline.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</i-input>
</Form-Item>
<Form-Item prop="password">
<i-input type="password" v-model="formInline.password" placeholder="Password">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</i-input>
</Form-Item>
<Form-Item>
<i-button type="primary" v-click="handleSubmit('formInline')">Signin</i-button>
</Form-Item>
</i-form>
</template>
</div>
</Card>
</div>
</div>
<script src="~/lib/vue2.5.17/vue.min.js"></script>
<script src="~/lib/iview3.1.4/iview.min.js"></script>
<script>
var vm = new Vue({
el: "#login",
data: {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please fill in the password.', trigger: 'blur' },
{ type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
]
}
},
methods: {
handleSubmit: function (formName) {
var _this = this;
console.log(formName);
console.log(_this.$refs[name]);
_this.$refs[formName].validate(function (valid) {
if (valid) {
alert('验证成功')
}
})
},
},
}); </script>
然后仔仔细细的检查了每一个标签,发现,click事件绑定写错了,绑定事件写错了竟然提示找不到validate属性,真是个奇怪的错误。
将代码中的
<Form-Item>
<i-button type="primary" v-click="handleSubmit('formInline')">Signin</i-button>
</Form-Item>
修改为:
<Form-Item>
<i-button type="primary" v-on:click="handleSubmit('formInline')">Signin</i-button>
</Form-Item>
即可。
Iview 表单提交: Cannot read property 'validate' of undefined的更多相关文章
- vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined
TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...
- 用jQuery Validate+layer插件实现好看的表单提交效果
作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- JavaWeb -- Struts2,对比, 简单表单提交,校验,防重复提交, 文件上传
Struts2核心流程图 1. Struts2 和 Struts1 对比 struts1:基于Servlet(ActionServlet),actionForm众多(类的爆炸),action单例(数据 ...
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- asp.net mvc 模型验证注解,表单提交
一.添加模型 public class Account { public int ID { get; set; } [Display(Name = "姓名")] //设置要显示的字 ...
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- EasyUI中在表单提交之前进行验证
使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return $("#form1").form('validate')方法即可,E ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
随机推荐
- C# .NET开发图形图像程序时提示"GDI+ 中发生一般性错误"
今天突然收到一封信,说我那个极度复杂的Marshal的问题被解决了(http://www.cnblogs.com/hotcan/archive/2005/01/12/91007.html).顿时感觉好 ...
- 关于JavaScript中省略元素对数组长度的影响
在学习<JavaScript权威指南>第六版的第7.1节中通过数组直接量创建数组时,我们可以不给数组的某个元素赋值,它就会使undefined.虽然是undefined,但我们调用数组对象 ...
- java 中重载(Overload)和重写(Override)的区别
首先重载和重写是应用于两个不同场景下面的两种不同的手段: 两者各自的特征: 重载(Overload):首先是位于一个类之中或者其子类中,具有相同的方法名,但是方法的参数不同,返回值类型可以相同也可以不 ...
- 【题解】洛谷P2375 [NOI2014] 动物园(KMP)
洛谷P2375:https://www.luogu.org/problemnew/show/P2375 思路 这道题可以说是完全刷新了本蒟蒻对KMP的理解 感觉对next数组的理解上升到一个新的高度 ...
- Xcode菜单功能中文翻译
Xcode菜单功能中文翻译 File 文件 Edit 编辑 View 视图 Navigate 导航 Editor 编辑 Product 产品 Window 窗口 Help 帮助 File 文件 ...
- 时钟晶振32.768KHz为什么是15分频?
实时时钟晶振为什么选择是32768Hz的晶振,在百度上搜索的话大部分的答案都是说2的15次方是32768,使用这个频率的晶振,人们可以很容易的通过分频电路得到1Hz的计时脉冲.但是话有说回来了,2的整 ...
- iOS:SQL
iOS虽然也有SQL,不过用得少(至少我目前是这样).大数据直接丢给后台,小的用Plist足矣. 再退一步,有FMDB,原生的也用得少了. 下面是之前学SQL时候的笔记. 1.创建 1-1).打开: ...
- wpf中使用cefsharp加载本地html网页并实现cs和js的交互,并且cefsharp支持any cpu
废话少说,直接上代码: 第一步: 第二步: 第三步: 第四步: App.xaml.cs对应的代码: using CefSharp; using CefSharp.Wpf; using System; ...
- 复习宝典之MyBatis
查看更多宝典,请点击<金三银四,你的专属面试宝典> 第五章:MyBatis MyBatis是一个可以自定义SQL.存储过程和高级映射的持久层框架. 1)创建sqlsession的流程 my ...
- 爬虫——Scrapy框架案例一:手机APP抓包
以爬取斗鱼直播上的信息为例: URL地址:http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=0 爬取字段:房间ID. ...