【限制输入框值类型】自定义指令el-input输入类型限制，vue和html两个版本

前言

经常遇到输入框需要限制只能输入数字的，
因为用户很离谱，明显输入数字的地方他非要输入英文或者中文
但是用到UI框架或者自己写方法验证表单比较麻烦
为了一个输入框专门去弄一个验证很麻烦
所以这里就整合了两种自定义指令的方式，更加方便使用
vue版本和 html版本都有。

vue版本自定义指令写法

1，弄一个input.js文件复制下面代码

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'))
    })
    //输入监听处理
    input.onkeyup = () => {
      if (vnode.locking) {
        return;
      }
      // v-input.num
      if (binding.modifiers.num) {//只能输入数字（开头可以多个0）
        onlyNum(input);
 
      }
      //v-input.num_point
      else if (binding.modifiers.num_point) {//只能输入数字+小数点（可以多个小数点）
        onlyNumPoint(input)
      }
      //v-input.float
      else if (binding.modifiers.float) {//只能输入浮点型（只能一个小数点）
        onlyFloat(input, binding.value)
      }
      //  v-input.int
      else if (binding.modifiers.int) {//只能输入整数（0+正整数）（开头不能多个0）
        onlyInt(input)
      }
      //v-input.intp
      else if (binding.modifiers.intp) {//只能输入正整数
        onlyIntp(input)
      }
      //v-input.alp
      else if (binding.modifiers.alp) {//只能输入字母
        onlyAlp(input)
      }
      //v-input.num_alp
      else if (binding.modifiers.num_alp) {//只能输入数字+字母
        onlyNumAlp(input)
      }
      //v-input.arith
      else if (binding.modifiers.arith) {//四则运算符+数字
        onlyArith(input)
      }
      input.dispatchEvent(new Event("input"));
    }
 
    //数字
    function onlyNum(input) {
      input.value = input.value.replace(/\D+/g, '');
    }
    //整数(0+正整数)
    function onlyInt(input) {
      let value = input.value;
      value = value.replace(/\D+/g, '');
      input.value = value ? Number(value).toString() : value//去掉开头多个0
    }
    //正整数
    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
      }
    }
 
    //数字+小数点
    function onlyNumPoint(input) {
      input.value = input.value.replace(/[^\d.]/g, "");
    }
 
    //浮点型
    // 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()//去掉开头多个0
      }
      input.value = value
    }
    //字母
    function onlyAlp(input) {
      input.value = input.value.replace(/[^A-Za-z]/g, '');
    }
    //数字+字母
    function onlyNumAlp(input) {
      input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
    }
 
    //四则运算+-*/()数字
    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
        }, '')
      }
    }
 
  },
 
}
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

2，注册自定义指令

import input from "./input.js";
 
export default{
    install:Vue=>{
        Vue.directive('input',input)
    }
}
1
2
3
4
5
6
7

3，全局注册方法
main.js

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

4，页面使用

         <!-- 只能数字 -->
        <el-input v-input.num v-model="input"></el-input>
         <!-- 只能数字+小数点 -->
        <el-input v-input.num_point v-model="input"></el-input>
         <!-- 只能整数 -->
        <el-input v-input.int v-model="input"></el-input>
         <!-- 浮点型后面限制2位 -->
        <el-input v-input.float="2" v-model="input"></el-input>
         <!-- 只能英文 -->
        <el-input v-input.alp v-model="input"></el-input>
1
2
3
4
5
6
7
8
9
10

html版本

1，先建一个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'))
    })
    //输入监听处理
    input.onkeyup = () => {
        // v-input="'num'"
        if (bindings.value == 'num') { //只能输入数字（开头可以多个0）
            onlyNum(input);
        }
        //v-input="'num_point'"
        else if (bindings.value == 'num_point') { //只能输入数字+小数点（可以多个小数点）
            onlyNumPoint(input)
        }
        //v-input="'float'"
        else if (bindings.value == 'float') { //只能输入浮点型（只能一个小数点）可以改变后面的数字改变保留几个小数点
            onlyFloat(input, 1)
        }
        //v-input="'int'"
        else if (bindings.value == 'int') { //只能输入整数（0+正整数）（开头不能多个0）
            onlyInt(input)
        }
        //v-input="'intp'"
        else if (bindings.value == 'intp') { //只能输入正整数
            onlyIntp(input)
        }
        //v-input="'alp'"
        else if (bindings.value == 'alp') { //只能输入字母
            onlyAlp(input)
        }
        //v-input="'num_alp'"
        else if (bindings.value == 'num_alp') { //只能输入数字+字母
            onlyNumAlp(input)
        }
        //v-input="'arith'"
        else if (bindings.value == 'arith') { //四则运算符+数字
            onlyArith(input)
        }
        input.dispatchEvent(new Event("input"));
    }
    //数字
    function onlyNum(input) {
        input.value = input.value.replace(/\D+/g, '');
    }
    //整数(0+正整数)
    function onlyInt(input) {
        let value = input.value;
        value = value.replace(/\D+/g, '');
        input.value = value ? Number(value).toString() : value //去掉开头多个0
    }
    //正整数
    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
        }
    }
    //数字+小数点
    function onlyNumPoint(input) {
        input.value = input.value.replace(/[^\d.]/g, "");
    }
    //浮点型
    // 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() //去掉开头多个0
        }
        input.value = value
    }
    //字母
    function onlyAlp(input) {
        input.value = input.value.replace(/[^A-Za-z]/g, '');
    }
    //数字+字母
    function onlyNumAlp(input) {
        input.value = input.value.replace(/[^A-Za-z0-9]/g, '');
    }
    //四则运算+-*/()数字
    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
            }, '')
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

2，去页面引入js文件

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

3，注册自定义指令
这里directives是和data，methods同级的。

directives: {
            input
        },
1
2
3

4，页面使用
后面的num是字符串类型的，区分你要限制什么

<el-input v-model="info" size="small" placeholder="请输入内容" v-input="'num'"></el-input>
1