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

 

转载于:https://www.cnblogs.com/e0yu/p/9854936.html