Чтобы ограничить ввод значений в текстовое поле с помощью Vue.js, можно воспользоваться директивой v-model для связи данных с полем ввода и добавить обработчик события ввода текста через @input или v-on:input для отслеживания введенных символов.
В данном примере, при каждом вводе в текстовое поле, вызывается метод filterNum, который проверяет, является ли введенное значение цифрами. Первый символ может быть нулем.
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="filterNum" placeholder="Только цифры">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
filterNum: function() {
if (!/^\d+$/.test(this.inputValue)) {
this.inputValue = this.inputValue.replace(/[^\d]/g, '');
}
}
}
});Для того чтобы в текстовое поле вводились только числа и при этом первый символ не мог быть нулем, можно использовать следующий пример:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="filterInt" placeholder="Только числа">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
filterInt: function() {
if (!/^\d*[1-9]\d*$/.test(this.inputValue)) {
this.inputValue = this.inputValue.slice(0, -1);
}
}
}
});В данном поле разрешено вводить только цифры, только один минус в начале и одну точку (например 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>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, '');
}
}
}
});В поле разрешено вводить только цифры, буквы русского и английского алфавита и пробел:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="filterStr" placeholder="Цифры, буквы английского и русского алфавита">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
filterStr() {
this.inputValue = this.inputValue.replace(/[^0-9a-zа-яё\s]/gi, "");
}
}
});Только буквы русского и английского алфавита и пробел:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="filterStr" placeholder="Буквы английского и русского алфавита">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
filterStr() {
this.inputValue = this.inputValue.replace(/[^a-zа-яё\s]/gi, "");
}
}
});Все буквы будут переводиться в нижний регистр.
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="toLowerCase" placeholder="Строчные буквы">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
toLowerCase() {
this.inputValue = this.inputValue.toLowerCase();
}
}
});Все буквы будут переводиться в верхний регистр.
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<input type="text" v-model="inputValue" @input="toUpperCase" placeholder="Заглавные буквы">
</div>new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
toUpperCase() {
this.inputValue = this.inputValue.toUpperCase();
}
}
});
