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

怎么在vue中實現(xiàn)input標(biāo)簽通用指令校驗？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

預(yù)期效果

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

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

指令實現(xiàn)

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

校驗整數(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);
    }
   },
  },
 }

關(guān)于怎么在vue中實現(xiàn)input標(biāo)簽通用指令校驗問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。