需求在前端开发过程中，我们经常会遇到表单验证的需求，比如验证用户输入框的内容，限制用户只能输入数字.本文内容基于element-ui，el-form组件可以绑定model和rule进行表单内容校验，但是如果有多个表单，多个输入框，就得写很多规则，虽然方法可以通用比较繁琐，可以通过自定义执行实现一次注册多次使用。Vue自定义指令我们使用el-input作为表单的输入框1.首先注册一个自定义指令importVuefrom'vue';Vue.directive('LimitInputNumber',{bind(el){#dosomething},});2.使用自定义命令直接在组件内绑定v-limit-input-number命令3.验证命令内的onkeypress事件。onkeypress事件将在按下键盘键时触发，在按下并释放某个键时发生。可以在事件触发时检测到。如果输入值不是数字，直接returnfalesVue.directive('LimitInputNumber',{bind(el){el.onkeypress=(event)=>{return(/[\d]/.test(String.fromCharCode(event.keyCode||event.which)))||event.which===8;};},});但是这个事件有一个问题，就是在使用中文输入法时不能触发事件，让用户输入中文的oninput事件。oninput事件在用户输入时触发。可以在事件触发的时候进行过滤，过滤掉那些不是数字的值，重新绑定到输入框，这样就解决了问题。中文输入法下的问题vue.directive('LimitInputNumber',{bind(el){el.oninput=()=>{el.children[0].value=el.children[0].value.replace(/\D/ig,'');};},});完整代码从“vue”导入Vue；Vue.directive('LimitInputNumber',{bind(el){el.onkeypress=(event)=>{return(/[\d]/.test(String.fromCharCode(event.keyCode||event.which)))||事件。其中===8；};el.oninput=()=>{el.children[0].value=el.children[0].value.replace(/\D/ig,'');};}，}）;结尾
