實現效果：

1. 手機號輸入/粘貼時，不允許輸入數字外的其它字符，按344分隔，最大輸入11位數字

2. 銀行卡號輸入/粘貼時，不允許輸入數字外的其它字符，每四位用空格分隔

代碼：

<template>
    <div class="form">
        <p>
            手機號：
            <input v-model="mobile" type="tel" ref="mobile" maxlength="13" @keyup="inputMobile" @paste="inputMobile" />
        </p>
        <p>
            銀行卡號：
            <input v-model="card" type="text" @keyup="inputCard" @paste="inputCard" />
        </p>
    </div>
</template>

js：

 1 <script>
 2     export default {
 3         data() {
 4             return {
 5                 mobile: ‘‘,
 6                 card: ‘‘
 7             }
 8         },
 9         methods: {
10             inputMobile() {
11                 let value = this.mobile.replace(/\D/g, ‘‘).substr(0, 11) //
 
 不允許輸入非數字字符，超過11位數字截取前11位
12                 let len = value.length
13                 if (len > 3 && len < 8) {
14                     value = value.replace(/^(\d{3})/g, ‘$1 ‘)
15                 } else if (len >= 8) {
16                     value = value.replace(/^(\d{3})(\d{4})/g, ‘$1 $2 ‘)
 
17                 }
18                 this.mobile = value
19             },
20             inputCard() {
21                 this.card = this.card.replace(/\D/g, ‘‘) // 不允許輸入非數字字符
22                 this.card = this.card.replace(/(\d{4})(?=\d)/g, ‘$1 ‘) // 4位一組，非獲取匹配最後一組數字，避免刪除到空格時會馬上自動補齊
23             }
24         }
25     } 
26 </script>

上述方案即可實現基本效果，但如果從中間開始刪除或添加內容時，光標會自動跑到最後，如下：

若想光標留在刪除/添加內容位置，需要設置光標位置：

修改js如下：

 1 <script>
 2     export default {
 3         data () {
 4             return {
 5                 mobile: ‘‘,
 6                 card: ‘‘
 7             }
 8         },
 9         methods: {
10             inputMobile (e) {
11                 this.formatMobile(e)
12                 this.mobile = this.$refs.mobile.value
13             },
14             formatMobile (e) {
15                 let val = this.$refs.mobile.value // 不可直接用this.mobile，第一方便提取該方法降低代碼耦合度，第二直接用this.mobile,在輸入漢字時按下shift按鍵會導致無法再輸入和刪除內容
16                 let selStart = this.$refs.mobile.selectionStart // 選中區域左邊界位置
17                 let mobileLen = val.length
18                 let value = this.getValue(e, val).substr(0, 11) // 獲取輸入/粘貼內容,並截取前11位
19                 let len = value.length
20                 if (len > 3 && len < 8) {
21                     value = value.replace(/^(\d{3})/g, ‘$1 ‘)
22                 } else if (len >= 8) {
23                     value = value.replace(/^(\d{3})(\d{4})/g, ‘$1 $2 ‘)
24                 }
25                 this.$refs.mobile.value = value
26                 if (selStart !== mobileLen) {
27                     if (selStart === 3) {
28                         selStart++
29                     }
30                     // 設置光標位置
31                     this.$refs.mobile.selectionStart = this.$refs.mobile.selectionEnd = selStart
32                 }
33             },
34             getValue(e, val) {
35                 let value = ‘‘
36                 if (e.type === ‘keyup‘) {
37                     value = val.replace(/\D/g, ‘‘)
38                 } else if (e.type === ‘paste‘) {
39                     // window.clipboardData：IE瀏覽器獲取剪貼板數據對象
40                     // event.clipboardData：Chrome, Firefox, Safari獲取剪貼板數據對象
41                     let clipboardData = event.clipboardData || window.clipboardData;
42                     value = clipboardData.getData(‘Text‘); // 獲取剪貼板text格式的數據
43                     value = value.replace(/\D/g, ‘‘)
44                 }
45                 return value
46             }
47         }
48     }
49 </script>

未實現：

不允許粘貼非數字內容到輸入框還未實現，改為了提交時校驗，如果有比較好的解決方案望大家提出

vue手機號按344分隔，銀行卡號每4位空格分隔