[VUE.JS] Vue.js 셀 값 변경 이벤트로 날짜(YYYY/MM/DD) 유효성 검사하기(onCellValueChanged)

vue날짜 유효성 검사를 하는 방법은 여러가지이지만 사용자가 셀 값을 입력한 직 후 event 를 발생시켜 사용자가 입력한 날짜의 유효성 검사를 실시해보기로 하자. 

     onCellValueChanged(event) {

 

     if (event.colDef.field == 'getDate') {

      

        const dateRegex = /^\d{4}\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/;

        const enteredDate = event.newValue;

     

        // console.log('enteredDate:', enteredDate);

        // console.log('dateRegex.test(enteredDate):', dateRegex.test(enteredDate));

        if (!dateRegex.test(enteredDate)) {

          alert('날짜가 유효하지 않습니다.');

          event.data.getDate = event.oldValue;

        }

      }

  

 

dateRegex.test(enteredDate) 는 true 나 false 로만 반환된다. 

event.data.getDate = event.oldValue; 로 부적절한 값을 입력했을 때에는 이전의 값으로 자동으로 돌려 준다.