快捷導(dǎo)航

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

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

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

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

預(yù)期效果

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

屬性data-last_value的值用來(lái)緩存用戶輸入框上一次失去焦點(diǎn)后輸入的值，lastTimes是初始化的變量，后續(xù)不會(huì)再隨意更改此值, v-model一定不要和data-last_value綁定同一個(gè)變量, 因?yàn)檫@樣就起不到記住用戶上一次輸入值，并利用該值在校驗(yàn)不通過(guò)的情況下使用它

指令實(shí)現(xiàn)

以下3個(gè)指令可完全獨(dú)立使用

校驗(yàn)整數(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('請(qǐng)輸入數(shù)字');
      el.value = lastValue;
      el.dispatchEvent(new Event('input'));
     }
     if (el.value === lastValue) return;
     // 更新上一次的值
     el.setAttribute('data-last_value', el.value);
    }
   },
  },
 }

校驗(yàn)最小值

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

校驗(yàn)最大值

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

小小的校驗(yàn)指令沒(méi)想到里面還有那么多細(xì)節(jié)~~~

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

您可能感興趣的文章: