General instruction verification of vue input tag

The mobile terminal usually requires some verification for the input tag, and the instructions of vue can achieve the perfect verification

anticipate result

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

The value of the attribute data last value is used to cache the value entered after the user's input box lost focus last time. lastTimes is the initialized variable, which will not be changed at will in the future. v-model must not bind the same variable with data last value, because it can't remember the user's last input value and use it when the verification fails

Instruction implementation

The following three instructions can be used completely independently

  • Check integer
  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);
          // Cache the last value with the data last value attribute value for recovery
          const lastValue = el.getAttribute('data-last_value');
          if (!util.isNumber(blurValue)) {
            util.toast('please enter a number');
            el.value = lastValue;
            el.dispatchEvent(new Event('input'));
          }
          if (el.value === lastValue) return;
          // Update last value
          el.setAttribute('data-last_value', el.value);
        }
      },
    },
  }
  • Verification minimum
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) {
            // Replace util.toast with the toast prompt pop-up window of your own business
            util.toast(`Minimum value cannot be less than ${min}`);
            el.value = min;
            el.dispatchEvent(new Event('input'));
          }
          const lastValue = el.getAttribute('data-last_value');
          if (el.value === lastValue) return;
          // Update last value
          el.setAttribute('data-last_value', el.value);
        }
      },
    },
  }
  • Verification maximum
  directives: {
    max: {
      // Definition of instructions
      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(`Maximum value cannot be greater than ${max}`);
            el.value = max;
            el.dispatchEvent(new Event('input'));
          }
          const lastValue = el.getAttribute('data-last_value');
          if (el.value === lastValue) return;
          // Update last value
          el.setAttribute('data-last_value', el.value);
        }
      },
    },
  }

I didn't expect that there were so many details in the little verification instruction~~~

Tags: Javascript Attribute Mobile Vue less

Posted on Tue, 05 Nov 2019 11:36:35 -0500 by misty