0

I am using vue-the-mask and I have a simple name field. All I want is for it to only allow letters. I am not very good with regex so I'd really appreciate some help. Thanks.

<input type="text" v-model="cardName" v-mask="/[A-Za-z]/">

Currently that is not allowing any characters in the input field.

Linx
  • 753
  • 3
  • 15
  • 34
  • are you sure you used **vue-the-mask**? from the syntax, it seems [v-mask] you are using. (https://www.npmjs.com/package/v-mask) – Sphinx Jul 24 '20 at 18:21
  • Yes, vue-the-mask. It also uses v-mask. https://vuejs-tips.github.io/vue-the-mask/ – Linx Jul 24 '20 at 18:24
  • looking into the URL you provided, the value of `v-mask` is not one javascript express, it will be tokens defined by that library itself. for example, `'S': {pattern: /[a-zA-Z]/}`, so `v-mask="SSSS" means 4 letters only. `'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()}`, so `v-mask="AAAA" means 4 upper case of letters. – Sphinx Jul 24 '20 at 18:51
  • Is there a way to create a custom rule that allows any amount of letters and spaces? – Linx Jul 24 '20 at 18:53
  • spaces and letters `[A-Za-z ]` –  Jul 24 '20 at 19:26
  • @Linx roughly read the source codes, it seems it doesn't support **a custom rule that allows any amount of letters and spaces**. I thought [tokens.optional](https://github.com/vuejs-tips/vue-the-mask/blob/master/src/tokens.js#L31) may be useful, but actually it isn't. – Sphinx Jul 24 '20 at 21:12
  • @Linx This doesn't look feasible with `vue-the-mask`. If you're open to other solutions, you could [filter out characters from the input](https://stackoverflow.com/questions/39782176/filter-input-text-only-accept-number-and-dot-vue-js/53330300) to achieve the same effect. – tony19 Jul 25 '20 at 07:02

2 Answers2

1

If you want only letters, but don't know the length try -> /[A-Za-z]{0,}/.

It will allow only letters with no limit. I am using vue-inputmask package. The problem I am facing is how to dynamically apply mask or regex based on input value.

Abdelsalam Shahlol
  • 1,621
  • 1
  • 20
  • 31
Nematjon Abdulloev
  • 11
  • 1
  • 1
  • 3
0

you can use v-mask="S*" . S means: [A-Za-z] , * means: infinity length

Timurhan Kaya
  • 9
  • 2