快捷導(dǎo)航

vue input標(biāo)簽通用指令校驗的實現(xiàn)

更新時間：2019年11月05日 15:45:09 作者：our_sky

這篇文章主要介紹了vue input標(biāo)簽通用指令校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

移動端通常對于input標(biāo)簽要求輸入有一些校驗，vue的指令可達到完美校驗的作用

預(yù)期效果

<input v-model="times" :data-last_value="lastTimes" v-int v-max="8" v-min="2" />

屬性data-last_value的值用來緩存用戶輸入框上一次失去焦點后輸入的值，lastTimes是初始化的變量，后續(xù)不會再隨意更改此值, v-model一定不要和data-last_value綁定同一個變量, 因為這樣就起不到記住用戶上一次輸入值，并利用該值在校驗不通過的情況下使用它

指令實現(xiàn)

以下3個指令可完全獨立使用

校驗整數(shù)

 const util = {
  isNumber(str) {
    const num = Number(str);
    return Math.floor(num) === num;
  }
 };
 directives: {
  int: {
   inserted: (el) => {
    let oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     // 用data-last_value屬性值緩存上一次的值，以便恢復(fù)
     const lastValue = el.getAttribute('data-last_value');
     if (!util.isNumber(blurValue)) {
      util.toast('請輸入數(shù)字');
      el.value = lastValue;
      el.dispatchEvent(new Event('input'));
     }
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

校驗最小值

directives: {
  min: {
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const min = binding.value;
     if (blurValue < min) {
      // util.toast替換成自己業(yè)務(wù)的toast提示彈窗
      util.toast(`最小值不能小于${min}`);
      el.value = min;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

校驗最大值

 directives: {
  max: {
   // 指令的定義
   inserted: (el, binding) => {
    const oldListener = el.onblur;
    el.onblur = (e) => {
     if (oldListener) {
      oldListener(e);
     }
     const blurValue = Number(el.value);
     const max = binding.value;
     if (blurValue > max) {
      util.toast(`最大值不能大于${max}`);
      el.value = max;
      el.dispatchEvent(new Event('input'));
     }
     const lastValue = el.getAttribute('data-last_value');
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

小小的校驗指令沒想到里面還有那么多細節(jié)~~~

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: