vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式。
方法一:直接阻止
<form id="form" @submit="checkForm" action="" method="post">
当前组件添加一个提交方法,在提交方法里面做阻止:
// 提交测试
checkForm: function (e) {
// 进行验证 验证通过就返回 true
if(clickValidate("form")){
return true;
};
e.preventDefault();
},
方法二:将阻止和验证方法提取到配置
具体方法是:将提交验证的公用方法都放到 config.js 需要的时候引入
import {config,dosubmit} from './util/config'
方法三:自定义指令来验证
具体方法:定义一个v-validateform的指令,在这个指令里面监听 submit 做验证
// validateform 验证表单
Vue.directive('validateform',{
inserted:function(el){
el.addEventListener('submit',function(e){
// 具体的验证方法 验证通过返回true
if(clickValidate(el.id)){
return true;
};
console.log(clickValidate(el.id));
e.preventDefault();
});
}
});
vue---阻止默认表单提交的三种方法的更多相关文章
- form表单提交的几种方法
form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...
- js阻止表单提交的两种方法
下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html表单提交的几种方法
原文地址:http://www.ijser.cn/?p=34 最普通最经常使用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” ...
- 阻止form表单提交的问题
阻止form表单提交这种场景可能在生活中,我们经常碰到,而在我们第一印象里面可能我们用return false 去阻止表单默认行为. 但是,有中情况我们用return false 不能阻止表单提交 & ...
- asp.net mvc表单提交的几种方式
asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以< ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- jQuery中防止表单提交两次的方法
遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...
随机推荐
- level 6 - unit 2 - 情态动词May
情态动词May 正式的请求/许可 意思为可以 例如我们在机场候机室听广播的时候,在播报航班前经常听到: may i have your attention ,please ! (请注意听) 在机场过安 ...
- 解决js中window.location.href不工作的问题
E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script type = "text/javascript" > ...
- wingIDE设置支持中文注释
用wingIDE快2年了,实在是受不了不支持中文,每次中文都报错,一个小逗号也要查很久,别说中文注释了,在网上找解决办法,原来这么简单! 下面,把破解放大和支持中文支持的方法备份下来,以便以后查看. ...
- Innodb表空间
Innodb有两种管理表空间的方法 独立表空间:每一张表都会生成独立的文件来进行存储,每一张表都有一个.frm表描述文件,和一个.ibd文件.其中ibd文件包括了单独一个表的数据内容和索引内容. 共享 ...
- 用plsql 导入导出oracle表结构数据
一.导出 (1)导出数据 进入pl/sql,"工具"---->"Export Tables...",然后在弹出的对话框中选择要导出的表,最后点击" ...
- c# 通过.net自带的chart控件绘制饼图pie chart
c# 通过.net自带的chart控件绘制饼图pie chart 需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...
- iOS分辨率的那些事儿(转)
1 iOS设备的分辨率 iOS设备,目前最主要的有3种(Apple TV等不在此讨论),按分辨率分为两类 iPhone/iPod Touch 普屏分辨率 320像素 x 480像素 Retina ...
- Java实现局部内部类的简单应用
日常生活中,闹钟的应用非常广泛.使用它可以更好地帮助人们安排时间.编写程序,实现一个非常简单的闹钟,控制台会不断输出当前的时间,并且每隔一秒钟会发出提示音.用户可以单击“确定”按钮来退出程序. 思路分 ...
- joda time, jackson 与 scala 反射
1. scala 反射,获得所有 field name 可以直接从 case class 获得 field 而不必创建实例 (get fields of a class without an inst ...
- NetBpm 安装篇(1)
尊重别人劳动成果 转载注明出处:http://www.cnblogs.com/anbylau2130/p/3875718.html 官方主页 http://www.netbpm.org/docs/in ...