Vue.js - Ограничение ввода в текстовые поля

Чтобы ограничить ввод значений в текстовое поле с помощью Vue.js, можно воспользоваться директивой v-model для связи данных с полем ввода и добавить обработчик события ввода текста через @input или v-on:input для отслеживания введенных символов.

1

В данном примере, при каждом вводе в текстовое поле, вызывается метод filterNum, который проверяет, является ли введенное значение цифрами. Первый символ может быть нулем.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="filterNum" placeholder="Только цифры">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		filterNum: function() {
			if (!/^\d+$/.test(this.inputValue)) {
				this.inputValue = this.inputValue.replace(/[^\d]/g, '');
			}
		}
	}
});
JS
2

Для того чтобы в текстовое поле вводились только числа и при этом первый символ не мог быть нулем, можно использовать следующий пример:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="filterInt" placeholder="Только числа">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		filterInt: function() {
			if (!/^\d*[1-9]\d*$/.test(this.inputValue)) {
				this.inputValue = this.inputValue.slice(0, -1);
			}
		}
	}
});
JS
3

В данном поле разрешено вводить только цифры, только один минус в начале и одну точку (например 1.99 или -2.01):

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="filterFloat" placeholder="Только числа с плавающей точкой">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		filterFloat() {
			this.inputValue = this.inputValue.replace(/[^-.0-9]/g, '');
			if (this.inputValue.startsWith('-')) {
				this.inputValue = '-' + this.inputValue.replace(/-/g, ''); 
			}
			if ((this.inputValue.match(/\./g) || []).length > 1) {
				this.inputValue = this.inputValue.slice(0, this.inputValue.lastIndexOf('.')); 
			}
			if (this.inputValue.includes('.') && !this.inputValue.includes('-')) {
				let parts = this.inputValue.split('.');
				this.inputValue = parts[0] + '.' + parts[1].replace(/\./g, ''); 
			}
		}
	}
});
JS
4

В поле разрешено вводить только цифры, буквы русского и английского алфавита и пробел:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="filterStr" placeholder="Цифры, буквы английского и русского алфавита">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		filterStr() {
			this.inputValue = this.inputValue.replace(/[^0-9a-zа-яё\s]/gi, "");
		}
	}
});
JS
5

Только буквы русского и английского алфавита и пробел:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="filterStr" placeholder="Буквы английского и русского алфавита">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		filterStr() {
			this.inputValue = this.inputValue.replace(/[^a-zа-яё\s]/gi, "");
		}
	}
});
JS
6

Все буквы будут переводиться в нижний регистр.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="toLowerCase" placeholder="Строчные буквы">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		toLowerCase() {
			this.inputValue = this.inputValue.toLowerCase();
		}
	}
});
JS
7

Все буквы будут переводиться в верхний регистр.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">
	<input type="text" v-model="inputValue" @input="toUpperCase" placeholder="Заглавные буквы">
</div>
HTML
new Vue({
	el: '#app',
	data: {
		inputValue: ''
	},
	methods: {
		toUpperCase() {
			this.inputValue = this.inputValue.toUpperCase();
		}
	}
});
JS
03.03.2024, обновлено 16.03.2024
352
Предыдущая запись PHP var_dump в переменную
Следующая запись Vue.js - работа с табами

Комментарии

, чтобы добавить комментарий.

Другие публикации

Удаление регулярными выражениями в PHP
Примеры регулярных выражений для удаления данных из текста.
47050
+9
Извлечение данных с помощью регулярных выражений PHP
Получение данных с помощью функций preg_match и preg_match_all.
39848
+9
Вставка и добавление в текст регулярными выражениями
Сборник регулярных выражений с использованием preg_replace для изменения строк и текстов.
6482
+1
date() – форматирование даты PHP
date($format, $timestamp) – форматирует дату/время по шаблону, где...
63435
+1
Генерация случайных буквенно-цифровых кодов в PHP
Несколько примеров, как сгенерировать случайные последовательности численных и буквенных строк заданной длины и...
11509
+4
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
77281
+5