4

Читаю https://ru.vuejs.org/v2/guide/syntax.html#Фильтры

И не как не могу понять, как их использовать.

Есть:

<input type="text" v-model="fam" id="fam" class="form-control test" name="thepost" placeholder="Фамилия" value="">

v-model="fam" нужен уже непосредственно для того, чтобы передать значение в vue...

А как сделать маску ввода для input, например, чтобы удалялись все русские буквы, ну или любую другую непосредственно при вводе.

Покажите простой пример пожалуйста.

2 ответа 2

4

Фильтр ввода удобнее сделать через универсальную директиву с regex на входе:

Vue.directive("filter", {
  bind: function(el, binding) {
    this.inputHandler = function(e) {
      var ch = String.fromCharCode(e.which);
      var re = new RegExp(binding.value);
      if (!ch.match(re)) {
        e.preventDefault();
      }
    };
    el.addEventListener("keypress", this.inputHandler);
  },
  unbind: function(el) {
    el.removeEventListener("keypress", this.inputHandler);
  },
  inputHandler: null
});

new Vue({
  el: "#app",
  data: {
    message: "Ivan"
  }
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <input type="text" v-filter="'[a-zA-Z]'" v-model="message">
</div>

2

Судя по вашему запросу, тут нужны не фильтры, а методы. Простой пример с разрешением ввода только латинских букв будет таким:

let app = new Vue({
  el: '#root',
  data: {
    fam: ''
  },
  methods: {
    noNumber: function(evt) {
      var regex = new RegExp("^[a-zA-Z ]+$");
      var key = String.fromCharCode(!evt.charCode ? evt.which : evt.charCode);
      if (!regex.test(key)) {
        event.preventDefault();
        return false;
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="root">
  <input type="text" v-model="fam" id="fam" class="form-control test" name="thepost" placeholder="Фамилия" v-on:keypress="noNumber(event)" value="">
</div>

5
  • маску для телефона тоже через regex можно сделать?
    – user231246
    14 апр 2017 в 10:16
  • 1
    в целом да, надо разрешить ввод только цифр и форматировать полученные данные при вводе. 14 апр 2017 в 11:10
  • 1
    Тут был ваш комментарий по форматированию инпута, вот нашел статью как воспользоваться для этого готовыми плагинами внутри Vue medium.com/@modex13/… 15 апр 2017 в 10:40
  • Угу, я уже так и сделал, поэтому и удалил комментарий. Спасибо
    – user231246
    15 апр 2017 в 11:38
  • @ЕвгенийГусев html5pattern.com/Phones там не только "телефонные" регэкспы
    – Jiraff537
    25 окт 2018 в 8:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.