提交表单时,提示报这个错,找了半天,然后也百度了很久,一直没找到答案,代码如下:

<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的更多相关文章

  1. vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined

    TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...

  2. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  3. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  4. JavaWeb -- Struts2,对比, 简单表单提交,校验,防重复提交, 文件上传

    Struts2核心流程图 1. Struts2 和 Struts1 对比 struts1:基于Servlet(ActionServlet),actionForm众多(类的爆炸),action单例(数据 ...

  5. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  6. asp.net mvc 模型验证注解,表单提交

    一.添加模型 public class Account { public int ID { get; set; } [Display(Name = "姓名")] //设置要显示的字 ...

  7. springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  8. EasyUI中在表单提交之前进行验证

    使用EasyUi我们可以在客户端表单提交之前进行验证,过程如下:只需在onSubmit的时候使用return  $("#form1").form('validate')方法即可,E ...

  9. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

随机推荐

  1. vue中调用地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 ...

  2. vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)

    vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...

  3. win7系统安装VS2013后,连不上远程sqlserver数据库解决办法

    刚搬了地方,顺便把电脑重做了系统,把sql2012和vs2013装好,怎么弄也连不上远程的数据库了,用程序连IIS直接死掉,用ssms连也是直接失去响应,开始以为是网线端口被运营商封杀了,最后发现不是 ...

  4. 在ASP.NET Core的startup类中如何使用MemoryCache

    问: 下面的代码,在ASP.NET Core的startup类中创建了一个MemoryCache并且存储了三个键值“entryA”,“entryB”,“entryC”,之后想在Controller中再 ...

  5. 一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要

    一点一点看JDK源码(六)java.util.LinkedList前篇之链表概要 liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JDK源码(〇) 1.什么 ...

  6. AppleDoc

    使用AppleDoc快速生成iOS开发文档 _ 皮卡丘♪-(´ε` ) 用 appledoc 生成文档 _ Garan no dou xcode-select_ error_ tool 'xcodeb ...

  7. 苹果内购小结 - iOS

    此篇针对 iOS 支付进行一次小结,很久没碰这块了,有些方法 Apple 官方也进行了优化,故也将随之进行更新. 首先,code 部分将分为两部分,一部分在 appdelegate 中,另一部分单独封 ...

  8. oracle入门(一)

    ### 一.体系结构 1. 数据库 : 只有一个数据库 2. 实例 : 后台运行的一个进程 3. 表空间: 逻辑存储单位 4. 数据文件: 物理存储单位 5. 用户:面向用户管理,由用户来管理表空间, ...

  9. 解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来

    好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴.在安卓机子上则没有这样的情况. 解决方法是通过h5的sc ...

  10. django的response-8

    视图函数在处理请求后,必须返回一个 HttpResponse 对象,或者 HttpResponse对象的子对象. 1. HttpResponse 可以通过 django.http.HttpRespon ...