[ Quasar ] q-input validate 메서드 파헤치기

Input | Quasar Framework

 

Quasar의 컴포넌트들은 굉장히 다양한 옵션과 메서드, 이벤트 등을 제공하기 때문에 프로젝트에서 유용하게 사용하고 있다. 그러던 중 Input의 입력 값에 대한 유효성 검사를 강하게 해야 할 필요가 있어 validate 메서드에 대해 더 깊이 알아보게 됐다.

---

 

validate 란?

q-input 공식 문서의 validate 메서드 설명

 

validate 메서드가 하는 일은 말 그대로 유효성 검사를 실행시키는 것이다. 

즉, 입력 값에 대한 유효성 검사를 수행하고 유효성 검사 결과에 따른 오류 메시지와 오류 표시를 적용한다.

 

그렇다면 validate는 어떻게 사용할까?

 

---

validate() 사용법

 

validate는 메서드이기 때문에 q-input에 바인딩된 ref를 통해 사용할 수 있다.

<q-input ref="inputRef" @blur="check"/>

 

또한 이벤트와 함께 사용하여 특정 이벤트가 발생했을 때 유효성 검사를 실행하도록 구현할 수 있다. 

const inputRef: Ref = ref(null);

const check = () => {
	inputRef.value.validate();
};

위의 코드는 q-input이 focus를 잃을 때 validate 메서드를 실행시켜 유효성 검사를 수행한다. 

 

또한 validate 메서드는 매개변수와 return 값이 존재한다. 

 

---

parameter

매개변수의 사용은 선택적이다.

validate의 매개변수는 boolean 타입이며 유효성 검사 결과의 즉시 업데이트 여부를 제어한다. 

 

◾ true : 유효성 검사 결과가 UI에 즉각적으로 업데이트되지 않는다. (내부적으로는 업데이트 O)

◾ false : 유효성 검사 결과를 UI에 즉각적으로 업데이트한다. (기본값)

 

즉, 유효성 검사 결과를 사용자에게 보여주지 않고 내부 프로그래밍적으로만 사용하려고 할 때는 매개변수로 true를 넣어주면 된다. 

inputRef.value.validate(true);

 

---

 

return

validate 메서드는 입력 값의 유효성 검사 통과 여부에 대한 boolean 값을 반환한다. 

유효성 검사 결과에 따라 입력 필드의 스타일이나 오류 메시지 등을 제어할 때 활용할 수 있다. 

 

---

유효성 검사 기준

q-input이 설정한 유효성 검사를 통해 오류를 보여주는 props를 rules와 error 두 가지이다.

그 중에서도 validate 메서드가 유효성을 판단하는 기준은 rules에 정의된 유효성 검사 규칙이다.

그렇기때문에 rules가 비어있으면 validate 메서드를 아무리 수행해도 아무런 변화가 일어나지 않는다.

 

이때, error는 동일한 에러 메시지와 표시가 발생하지만 validate 메서드의 유효성 검사에는 아무런 영향을 끼치지 않는다. (단순히 사용자 지정 오류를 표시하기 위해서만 사용된다.)