vuejs-tips / vue-the-mask

Tiny (<2k gzipped) and dependency free mask input for Vue.js
https://vuejs-tips.github.io/vue-the-mask/
1.72k stars 212 forks source link

Bug - 2 regex for 2 different formats don't work #207

Open on-valerio-luc opened 10 months ago

on-valerio-luc commented 10 months ago

Hello guys, I am trying to use two masks for 2 different formats and it looks like it doesn't work perfectly. I am using a v-mask directive and my code looks like this:

 v-mask="{
      mask: ['R ### ### ###', 'SO ### ## ##'],
      tokens: tokens,
    }"

const tokens = {
      O: { pattern: /[oO]/, transform: (v: string) => v.toLocaleUpperCase() },
      R: { pattern: /[rR]/, transform: (v: string) => v.toLocaleUpperCase() },
      S: { pattern: /[sS]/, transform: (v: string) => v.toLocaleUpperCase() },
      '#': { pattern: /[0-9]/ },
    }

the fields lets me input only SO 123 12 12 but not R 123 123 321 (it prevents the R to be inputted). The only way I have now to achieve that is to do

 v-mask="{
      mask: ['R ### ### ###', 'RR ### ## ##'],
      tokens: tokens,
    }"

const tokens = {
      R: { pattern: /[oOrRsS0-9], transform: (v: string) => v.toLocaleUpperCase() },
      '#': { pattern: /[0-9]/ },
    }

which however would let input also 11 123 124 213 or RO 122 12 12 which are not accepted inputs. Any suggestions on how I might solve? Thanks Valerio