一種簡單好用的Vue表單驗證

Hxf1996發表於2017-11-03
Vue

前言

需要進行表單資料驗證，原先才用html5來完成驗證，但是效果很差，也不夠靈活，所以需要進行自定義的表單驗證，網上的外掛都太過龐大，專案並沒有這麼多的需求。
那讓我們自己來寫一個吧！

知識準備

  1. vue的自定義指令
    具體可以看官方手冊，連線如下

vuejs.org/v2/guide/cu…

總的來說就是可以幫你在指定的鉤子函式中跳用你的函式，引數（el，binding， vnode）

  • el: 繫結的dom
  • binding: 指令的各項屬性
  • vnode: Vue 編譯生成的虛擬節點

    開始

  1. 指令的申明
    需要注意的是引數在背繫結上後不會被所以要才用閉包的方式

    Vue.directive('validate', {
// 在指令第一次背繫結上時呼叫
bind(el, binding, vnode) {
}
}複製程式碼
    <form id="red-package" @submit.prevent="submit" v-validate.formData="validate">
...
<button type="submit" class="save">儲存</button>
</form>複製程式碼

  2. 解析引數

Vue.directive('validate', {
  // vm物件，就是元件
  const vm = vnode.context;
  // 獲得引數繫結的引數，就是規則物件
  const validate = binding.value;
  // 獲得資料的key
  const dataKey = Object.keys(binding.modifiers)[0];
});複製程式碼
  1. 輸入內容改變時進行規則驗證
el.addEventListener('change', (e) => {
  try {
    // 事件觸發的input標籤名
    const changeElName = e.srcElement.name;
    // 如果未設定規則不驗證
    if (validate[changeElName]) {
      // 把表單的所有引數傳入
      validate[changeElName](vm[dataKey]);
      // 檢驗成功新增成功的class
      Util.removeClass(e.srcElement, 'success');
    }
  } catch (err) {
    // 丟擲異常新增失敗的class
    Util.addClass(e.srcElement, 'error');
  }
});複製程式碼
  1. 在提交時對所有資料進行校驗
// 有更好的方案
el.getElementsByTagName('button')[0].addEventListener('click', (e) => {
  try {
    // 遍歷物件
    Object.keys(vm[dataKey]).forEach((item) => {
      if (validate[item]) {
        validate[item](vm[dataKey]);
      }
    });
  } catch (err) {
    // 丟擲錯誤提示
    vm.loading({
      text: '請檢查引數',
    });
    vm.loaded(1000);
    // 阻止submit
    e.preventDefault();
  }
});複製程式碼
  1. 校驗規則例項
amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
    if (amountRandomUpper < 1) {
        throw new Error('過小');
    }
    if (amountRandomUpper < amountRandomLower) {
        throw new Error('過小');
    }
    if (amountRandomUpper > budget) {
        throw new Error('過小');
    }
}複製程式碼

結束

這當中還是存在很多問題，有什麼好的建議希望可以指出

相關文章