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();
});
}
});
上一篇:微软新一代Surface,该怎么看?


下一篇:python-windows下将单个py文件生成exe