【限制输入框值类型】自定义指令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.numif (binding.modifiers.num) {//只能输入数字（开头可以多个0）onlyNum(input);}//v-input.num_pointelse if (binding.modifiers.num_point) {//只能输入数字+小数点（可以多个小数点）onlyNumPoint(input)}//v-input.floatelse if (binding.modifiers.float) {//只能输入浮点型（只能一个小数点）onlyFloat(input, binding.value)}//  v-input.intelse if (binding.modifiers.int) {//只能输入整数（0+正整数）（开头不能多个0）onlyInt(input)}//v-input.intpelse if (binding.modifiers.intp) {//只能输入正整数onlyIntp(input)}//v-input.alpelse if (binding.modifiers.alp) {//只能输入字母onlyAlp(input)}//v-input.num_alpelse if (binding.modifiers.num_alp) {//只能输入数字+字母onlyNumAlp(input)}//v-input.arithelse 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开头去除0value = value.substring(1)}input.value = value}}//数字+小数点function onlyNumPoint(input) {input.value = input.value.replace(/[^\d.]/g, "");}//浮点型// eslint-disable-next-line no-unused-varsfunction 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-escapevar 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.valueif (value) {input.value = value.split('').reduce((prev, cur) => {// eslint-disable-next-line no-useless-escapeif (/^[\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，页面使用

         <!-- 只能数字 --><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>

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开头去除0value = value.substring(1)}input.value = value}}//数字+小数点function onlyNumPoint(input) {input.value = input.value.replace(/[^\d.]/g, "");}//浮点型// eslint-disable-next-line no-unused-varsfunction 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-escapevar 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.valueif (value) {input.value = value.split('').reduce((prev, cur) => {// eslint-disable-next-line no-useless-escapeif (/^[\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是字符串类型的，区分你要限制什么

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