vue 사용자 정의 명령 입력 상자 의 입력 값 을 제한 하 는 절차 와 전체 코드

수요
전단 개발 과정 에서 폼 검사 에 대한 수요 가 자주 발생 합 니 다.예 를 들 어 사용자 입력 상자 의 내용 을 검사 하고 사용자 가 숫자 만 입력 할 수 있 도록 제한 합 니 다.
본 논문 의 내용 은 element-ui 를 바탕 으로 el-form 구성 요 소 는 model,rule 을 연결 하여 폼 내용 검증 에 사용 할 수 있 습 니 다.그러나 여러 폼 에 여러 개의 입력 상자 가 있 으 면 여러 개의 rule 을 써 야 합 니 다.방법 은 통용 되 지만 사용 하기에 도 비교적 번 거 롭 습 니 다.사용자 정의 로 한 번 에 등록 하고 여러 번 사용 할 수 있 습 니 다.
Vue 사용자 정의 명령
우 리 는 el-input 를 폼 의 입력 상자 로 사용 합 니 다.
1.사용자 정의 명령 을 등록 합 니 다.

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
 # do something
 },
});

2.사용자 정의 명령 사용
구성 요소 에 v-limit-input-number 명령 을 직접 연결 합 니 다.

<el-input v-limit-input-number />

3.내부 점검 명령
onkeypress 이벤트
onkeypress 이 벤트 는 키보드 버튼 이 눌 리 고 키 가 풀 릴 때 발생 합 니 다.
이벤트 가 실 행 될 때 입력 한 값 이 숫자 가 아 닌 경우 fales 로 되 돌아 갈 수 있 습 니 다.

Vue.directive('LimitInputNumber', {
 bind(el) {
 el.onkeypress = (event) => {
  return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
 };
 },
});

그러나 이 사건 에 문제 가 있 습 니 다.중국어 입력 법 에서 이 벤트 를 실행 할 수 없어 서 사용자 가 중국 어 를 입력 할 수 있 습 니 다.

oninput 이벤트
oninput 이벤트 가 사용자 가 입력 할 때 실 행 됩 니 다.
이벤트 가 실 행 될 때 필터 링 을 할 수 있 습 니 다.숫자 가 아 닌 값 을 걸 러 내 고 입력 상자 에 다시 연결 하여 중국어 입력 법의 문 제 를 해결 하 였 습 니 다.

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

전체 코드

import Vue from 'vue';

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.onkeypress = (event) => {
   return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
  };
  el.oninput = () => {
   el.children[0].value = el.children[0].value.replace(/\D/ig, '');
  };
 },
});

총결산
vue 사용자 정의 명령 으로 입력 상자 의 입력 값 을 제한 하 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 사용자 정의 명령 으로 입력 상자 의 입력 값 을 제한 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!