Vue JS - Как ограничить специальные символы в поле ввода? - PullRequest
Новая
       46

Vue JS - Как ограничить специальные символы в поле ввода?

0 голосов
/ 28 мая 2018

Каков наилучший способ реализации текстовых ограничений в Vue JS?Я рассчитываю добиться с RegExp, чтобы пользователь не мог вводить символы в поле.

1 Ответ

0 голосов
/ 28 мая 2018

Либо используя значение watch или computed с установщиком и получателем. 

watch: {
  myAlphaNumField(newVal) {
    let re = /[^A-Z0-9]/gi;
    this.$set(this, 'myAlphaNumField', newVal.replace(re, ''));
  }
}

Если вы хотите, чтобы регулярное выражение точно соответствовало шаблону, хитрость заключается в определении регулярного выражения в таком видеспособ, позволяющий использовать все символы до последнего.

Например, если вы хотите иметь ровно 5 цифр (#####), регулярное выражение должно быть \d{1,5}, а не \d{5}, потому чтоВы должны быть в состоянии набрать первые четыре до этого, хотя вы все равно будете использовать эту более позднюю, чтобы проверить, заполнено ли поле / заполнено / действительно.

другой пример, для A#A#A# будет [A-Z]([0-9]([A-Z]([0-9]([A-Z]([0-9])?)?)?)?)? Дело в том, что каждый символ после первого является необязательным, но только если доступен предыдущий символ

еще один пример для ###-AA: \d(\d(\d(\-(\w(\w)?)?)?)?)?

, вы также можете использоватьсуществующая библиотека, такая как https://github.com/insin/inputmask-core (которая не включает расширение vue) или https://github.com/niksmr/vue-masked-input (которая включает)

...