Vue JS - 입력 필드의 특수 문자를 제한하는 방법

Vue JS - 입력 필드의 특수 문자를 제한하는 방법

Vue JS에서 텍스트 문자 제한을 구현하는 가장 좋은 방법은 무엇입니까? 사용자가 필드에 기호를 입력할 수 없도록 RegExp를 사용하는 방법을 찾고 있습니다.

저는 두 가지 방법을 사용합니다.

첫 번째 방법은watch또는computedDaniel이 위에서 추천한 바와 같이 세터로 값을 매겨야 합니다.키보드 입력을 처리할 뿐만 아니라 드래그 앤 드롭, 붙여넣기 또는 사용자가 생각해낸 모든 것을 통해 입력을 처리할 수 있습니다.

두 번째는keydown핸들러watched 값만 사용하는 경우 UI에서 약간의 지연이 발생합니다.제한 문자는 삭제하기 전에 짧게 표시됩니다.보다 심리스한 사용자 경험을 실현하기 위해keydownlistener는 잘못된 입력에 대해 키보드 이벤트를 취소합니다.

new Vue({
  el: "#app",
  data: {
    name: "",
  },
  watch: {
    name(val) {
      this.name = val.replace(/\W/g, "");
    },
  },
  methods: {
    nameKeydown(e) {
      if (/^\W$/.test(e.key)) {
        e.preventDefault();
      }
    },
  },
});

html {
  font-family: sans-serif;
}

.demo {
  display: flex;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <p>Try typing spaces, punctuation, or special characters into each box to see the difference made by the key handler.</p>
  <div class="demo">
    <div>
      <div>Without key handler:</div>
      <input type="text" v-model="name" />
    </div>
    <div>
      <div>With key handler:</div>
      <input type="text" v-model="name" @keydown="nameKeydown($event)" />
    </div>
  </div>
</main>

둘 중 하나를 사용하여watch또는computedsetter와 getter를 통한 가치.

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

정규식이 패턴과 정확히 일치하도록 하려면 마지막까지 모든 문자를 허용하도록 정규 표현을 정의하는 것이 중요합니다.

예를 들어, 정확히 5 자리수를 가지는 경우(#####), 정규식은 다음과 같습니다.\d{1,5}가 아니라\d{5}그 전에 첫 번째 4개를 입력할 수 있어야 하는데, 그 다음 4개를 사용하여 필드가 완료/완료/유효한지 확인합니다.

또 다른 예로서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(확장자를 포함하지 않음)과 같은 기존 라이브러리를 사용할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/50566430/vue-js-how-to-restrict-special-characters-in-an-input-field