对数字控制 手机号 身份证

这样的需求是经常用到的。但是我们在用的时候却发现了一些问题:

<el-input v-model="mobile"   placeholder="手机号"  type="number"  maxlength="11"></el-input>

只能输入数字:type="number"  

最长11位 : maxlength="11"

如果写type="number"  maxlength="11"。的确只能输入数字但是maxlength="11"的长度限制却失效了。

如果不写type="number"用text。或者tel。maxlength="11"的长度限制有用。但是却可以输入非数字。

我们可以在main.js里面写个全局的指令。用来限制只输入数字。

 

/* 自定义指令只能输入数字 使用 v-number-only*/

Vue.directive('numberOnly', {
  bind: function(el) {  

    el.handler = function() {
      el.childNodes[1].value = el.childNodes[1].value.replace(/\D+/g, '');//因为是elementui组件里使用的el.value获取不到我们输入的内容。然后我发现他的第一个孩子才是我们输入的手机号码的内容。

     

    }

    el.addEventListener('keyup', el.handler); //这里使用keyup。我开始用的input发现第一次输入拼音字母竟然是可以输入的。改成keyup就都不能输入非数字了

  },

  unbind: function(el) {
    el.removeEventListener('keyup', el.handler);

  }

})

然后使用

<el-input v-model="mobile"   placeholder="手机号"  v-number-only   maxlength="11"></el-input>
————————————————
版权声明：本文为CSDN博主「夏天想」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33769914/article/details/107067073