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();
});
}
});