Hybrid App - form, validation

Hybrid App

form

앱 키패드를 보면, 오른쪽 하단에 이동, 다음 버튼이 있다. 같은 위치에 있지만, 시점에 따라 버튼 텍스트가 다르다.

이동: (form으로 감싸져있을 때,) focus될 다음 영역이 버튼이 아닌 다른 모든 경우(ex - input, radio button…)
다음: (form으로 감싸져있을 때,) focus될 다음 영역이 버튼인 경우

form의 문제점

폼의 값을 입력하지 않은 채, submit버튼을 누르게 되면 폼이 전송되는데 이것은 문제가 될 수 있다. 이 문제를 막기 위해서는 preventDefault를 사용해주면 된다.

v-form(@submit.prevent="onSubmit")

onSubmit(e) {
  e.preventDefault()
}

validation

회원가입이나 약관 동의를 받을 때 validation을 체크해야하는 일이 생기는데 IOS에서는 잘 동작하지만, AOS에서는 동작이 잘 안되는 폰이 있다. 정확히 어떤 폰이 동작하는지, 동작이 안되는지는 모르겠지만, 간단한 테스트를 통해 validation이 input필드에서 하나하나 문자열을 입력했을 때, 실시간으로 바인딩이 안되는 문제를 확인했다.

input(@input="test")
| {{ bindValue }}

test() {
  this.bindValue = [this.$v.email.$model, this.$v.email.email]
}

위와 같이 테스트 코드를 작성했을 때, 바로바로 바인딩이 되지 않는 것을 확인했다.(IOS, PC에서는 정상 작동)

단, 중요한 것이 있다!
이메일 validation만 동작하지 않았다…

해결책

1. 시간이 많다면 vuelidate라는 라이브러리를 사용하지 않고, custom으로 사용했을 것이다.
2. 나의 경우, 시간이 없었으므로, 그리고 이메일 validation만 동작하지 않았으므로, 이 부분은 버튼을 눌렀을 때, 처리하기로 했다. regex로