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