input输入限制以及校验之总结篇

前沿：
input的输入限制是一个非常常见的需求，比如我们在一个表单内需要输入时间，则我们就需要限制输入的内容只能是数字，并且是正整数，这如果用表单校验也可以，但是如果直接可以通过input的输入限制，直接讲此扼杀在摇篮中那岂不是美哉下面就是我对一些常见的输入限制的一些总结：（本文的技术栈是Vue3， TypeScript, Vue2可以自行转换）

一、事件的绑定

1.通过input事件绑定并限制输入：

🦋主要是通过@input事件来监听我们的键盘输入并将输入的内容进行劫持处理，过滤来实现整个input按钮的输入过滤。

<el-input v-model="modelValue" @input="inputChange"></el-input>

const modelValue = ref('')

const inputChange = (e:string|null) => {
   
    ....限制语句
    modelValue.value = e
}

还可以利用$event来实现对一个对象内的多个变量进行统一的输入过滤方法暴露

<el-input v-model="form.value" @input="handleEdit($event, 'value')"></el-input>

const handleEdit = (e, expr) => {
   
  e = e.replace(/^0(0+)|[^\d]+/g, '')
  e = e && Number(e)
  this.form[expr] = e
}

2.通过directive自定义指令限制输入：

我们全局定义自定义指令，这边以positive-int为例，在main.ts内挂载到app后就可以在任何input上绑定，值得注意的是我们一般会用到一些input输入组件，那此事我们在定义🀄️令中获取到的el节点并不是实际的input输入框节点，而是一个封装的组件，别忘了通过dom选择器获取实际的输入框再开始输入限制🚫操作。

<el-input v-model="value" v-positive-int />
const value = ref('')

import type {
    App } from 'vue'
export const directive = (app: App<Element>) => {
   
    app.directive('positive-int', (el, binding, vnode) => {
   
    	// 这将被作为 `mounted` 和 `updated` 调用
    	// 用于解决element组件获取到的el并不是实际输入框的问题
        const input = el.querySelector('.el-input__inner') || el.querySelector('.el-textarea__inner') || el
        input.onkeyup = () => {
   
            let {
    value } = input
            ............限制语句
            input.value = value
            input.dispatchEvent(new Event('input'))
        }
    })
}

main.ts