前言

經(jīng)常遇到輸入框需要限制只能輸入數(shù)字的，
因?yàn)橛脩艉茈x譜，明顯輸入數(shù)字的地方他非要輸入英文或者中文
但是用到UI框架或者自己寫方法驗(yàn)證表單比較麻煩
為了一個(gè)輸入框?qū)ｉT去弄一個(gè)驗(yàn)證很麻煩
所以這里就整合了兩種自定義指令的方式，更加方便使用
vue版本和 html版本都有。

vue版本自定義指令寫法

1，弄一個(gè)input.js文件復(fù)制下面代碼

export default {
  bind(el, binding, vnode) {
    const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;
    input.addEventListener('compositionstart', () => {
      vnode.locking = true//解決中文輸入雙向綁定失效
    })
    input.addEventListener('compositionend', () => {
      vnode.locking = false//解決中文輸入雙向綁定失效
      input.dispatchEvent(new Event('input'))
    })
    //輸入監(jiān)聽處理
    input.onkeyup = () => {
      if (vnode.locking) {
        return;
      }
      // v-input.num
      if (binding.modifiers.num) {//只能輸入數(shù)字（開頭可以多個(gè)0）
        onlyNum(input);
 
      }
      //v-input.num_point
      else if (binding.modifiers.num_point) {//只能輸入數(shù)字+小數(shù)點(diǎn)（可以多個(gè)小數(shù)點(diǎn)）
        onlyNumPoint(input)
      }
      //v-input.float
      else if (binding.modifiers.float) {//只能輸入浮點(diǎn)型（只能一個(gè)小數(shù)點(diǎn)）
        onlyFloat(input, binding.value)
      }
      //  v-input.int
      else if (binding.modifiers.int) {//只能輸入整數(shù)（0+正整數(shù)）（開頭不能多個(gè)0）
        onlyInt(input)
      }
      //v-input.intp
      else if (binding.modifiers.intp) {//只能輸入正整數(shù)
        onlyIntp(input)
      }
      //v-input.alp
      else if (binding.modifiers.alp) {//只能輸入字母
        onlyAlp(input)
      }
      //v-input.num_alp
      else if (binding.modifiers.num_alp) {//只能輸入數(shù)字+字母
        onlyNumAlp(input)
      }
      //v-input.arith
      else if (binding.modifiers.arith) {//四則運(yùn)算符+數(shù)字
        onlyArith(input)
      }
      input.dispatchEvent(new Event("input"));
    }
 
    //數(shù)字
    function onlyNum(input) {
      input.value = input.value.replace(/\D+/g, '');
    }
    //整數(shù)(0+正整數(shù))
    function onlyInt(input) {
      let value = input.value;
      value = value.replace(/\D+/g, '');
      input.value = value ? Number(value).toString() : value//去掉開頭多個(gè)0
    }
    //正整數(shù)
    function onlyIntp(input) {
      if (!/^[1-9][0-9]*$/.test(input.value)) {
        let value = input.value.replace(/\D+/g, '');
        if (value && value.substring(0, 1) === '0') {//0開頭去除0
          value = value.substring(1)
        }
 
        input.value = value
      }
    }
 
    //數(shù)字+小數(shù)點(diǎn)
    function onlyNumPoint(input) {
      input.value = input.value.replace(/[^\d.]/g, "");
    }
 
    //浮點(diǎn)型
    // eslint-disable-next-line no-unused-vars
    function onlyFloat(input, n) {
      let value = input.value;
      value = value.replace(/[^\d.]/g, '');
      value = value.replace(/^\./g, '');
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      if (n&&Number(n)>0) {//限制n位
        var d = new Array(Number(n)).fill(`\\d`).join('');
        // eslint-disable-next-line no-useless-escape
        var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');
        value = value.replace(reg, '$1$2.$3')
      }
      if (value && !value.includes('.')) {
           value =  Number(value).toString()//去掉開頭多個(gè)0
      }
      input.value = value
    }
    //字母
    function onlyAlp(input) {
      input.value = input.value.replace(/[^A-Za-z]/g, '');
    }
    //數(shù)字+字母
    function onlyNumAlp(input) {
      input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
    }
 
    //四則運(yùn)算+-*/()數(shù)字
    function onlyArith(input) {
      let value = input.value
      if (value) {
        input.value = value.split('').reduce((prev, cur) => {
          // eslint-disable-next-line no-useless-escape
          if (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {
            return prev + cur
          }
          return prev
        }, '')
      }
    }
 
  },
 
}
 
 
 
 
 
 

2，注冊自定義指令

import input from "./input.js";
 
export default{
    install:Vue=>{
        Vue.directive('input',input)
    }
}

3，全局注冊方法
main.js

 import inputDirective from './directive/input/install';
 Vue.use( inputDirective );

4，頁面使用

         <!-- 只能數(shù)字 -->
        <el-input v-input.num v-model="input"></el-input>
         <!-- 只能數(shù)字+小數(shù)點(diǎn) -->
        <el-input v-input.num_point v-model="input"></el-input>
         <!-- 只能整數(shù) -->
        <el-input v-input.int v-model="input"></el-input>
         <!-- 浮點(diǎn)型后面限制2位 -->
        <el-input v-input.float="2" v-model="input"></el-input>
         <!-- 只能英文 -->
        <el-input v-input.alp v-model="input"></el-input>

html版本

1，先建一個(gè)input.js文件放入以下代碼

function input(el, bindings) {
    const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el;
    input.addEventListener('compositionstart', () => {
        vnode.locking = true //解決中文輸入雙向綁定失效
    })
    input.addEventListener('compositionend', () => {
        vnode.locking = false //解決中文輸入雙向綁定失效
        input.dispatchEvent(new Event('input'))
    })
    //輸入監(jiān)聽處理
    input.onkeyup = () => {
        // v-input="'num'"
        if (bindings.value == 'num') { //只能輸入數(shù)字（開頭可以多個(gè)0）
            onlyNum(input);
        }
        //v-input="'num_point'"
        else if (bindings.value == 'num_point') { //只能輸入數(shù)字+小數(shù)點(diǎn)（可以多個(gè)小數(shù)點(diǎn)）
            onlyNumPoint(input)
        }
        //v-input="'float'"
        else if (bindings.value == 'float') { //只能輸入浮點(diǎn)型（只能一個(gè)小數(shù)點(diǎn)）可以改變后面的數(shù)字改變保留幾個(gè)小數(shù)點(diǎn)
            onlyFloat(input, 1)
        }
        //v-input="'int'"
        else if (bindings.value == 'int') { //只能輸入整數(shù)（0+正整數(shù)）（開頭不能多個(gè)0）
            onlyInt(input)
        }
        //v-input="'intp'"
        else if (bindings.value == 'intp') { //只能輸入正整數(shù)
            onlyIntp(input)
        }
        //v-input="'alp'"
        else if (bindings.value == 'alp') { //只能輸入字母
            onlyAlp(input)
        }
        //v-input="'num_alp'"
        else if (bindings.value == 'num_alp') { //只能輸入數(shù)字+字母
            onlyNumAlp(input)
        }
        //v-input="'arith'"
        else if (bindings.value == 'arith') { //四則運(yùn)算符+數(shù)字
            onlyArith(input)
        }
        input.dispatchEvent(new Event("input"));
    }
    //數(shù)字
    function onlyNum(input) {
        input.value = input.value.replace(/\D+/g, '');
    }
    //整數(shù)(0+正整數(shù))
    function onlyInt(input) {
        let value = input.value;
        value = value.replace(/\D+/g, '');
        input.value = value ? Number(value).toString() : value //去掉開頭多個(gè)0
    }
    //正整數(shù)
    function onlyIntp(input) {
        if (!/^[1-9][0-9]*$/.test(input.value)) {
            let value = input.value.replace(/\D+/g, '');
            if (value && value.substring(0, 1) === '0') { //0開頭去除0
                value = value.substring(1)
            }

            input.value = value
        }
    }
    //數(shù)字+小數(shù)點(diǎn)
    function onlyNumPoint(input) {
        input.value = input.value.replace(/[^\d.]/g, "");
    }
    //浮點(diǎn)型
    // eslint-disable-next-line no-unused-vars
    function onlyFloat(input, n) {
        let value = input.value;
        value = value.replace(/[^\d.]/g, '');
        value = value.replace(/^\./g, '');
        value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        if (n && Number(n) > 0) { //限制n位
            var d = new Array(Number(n)).fill(`\\d`).join('');
            // eslint-disable-next-line no-useless-escape
            var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, 'ig');
            value = value.replace(reg, '$1$2.$3')
        }
        if (value && !value.includes('.')) {
            value = Number(value).toString() //去掉開頭多個(gè)0
        }
        input.value = value
    }
    //字母
    function onlyAlp(input) {
        input.value = input.value.replace(/[^A-Za-z]/g, '');
    }
    //數(shù)字+字母
    function onlyNumAlp(input) {
        input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
    }
    //四則運(yùn)算+-*/()數(shù)字
    function onlyArith(input) {
        let value = input.value
        if (value) {
            input.value = value.split('').reduce((prev, cur) => {
                // eslint-disable-next-line no-useless-escape
                if (/^[\d|\-|\+|\*|\/|\.|\(|\)]+$/.test(cur)) {
                    return prev + cur
                }
                return prev
            }, '')
        }
    }
}

2，去頁面引入js文件

<script type="text/javascript" src="./input.js"></script>

3，注冊自定義指令
這里directives是和data，methods同級的。

directives: {
            input
        },

4，頁面使用
后面的num是字符串類型的，區(qū)分你要限制什么文章來源地址http://www.zghlxwxcb.cn/news/detail-742931.html

<el-input v-model="info" size="small" placeholder="請輸入內(nèi)容" v-input="'num'"></el-input>

到了這里，關(guān)于【限制輸入框值類型】自定義指令el-input輸入類型限制，vue和html兩個(gè)版本的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！