[Vue+] Form Handling

Form

Form은 웹 어플리케이션에서 가장 많이 사용되는 코드 형식으로 로그인, 상품 결제 등 사용자의 입력을 처리하는데 주로 사용됩니다.

Form에 Vue 속성 추가

<form @submit.prevent="login">
	<table>
    	<tr>
        	<th>아이디</th>
            <td>
            	<input type="text" id="id" v-model="id">
			</td>
        </tr>
        <tr>
        	<th>비밀번호</th>
            <td>
            	<input type="text" id="pw" v-model="pw">
            </td>
        </tr>
    </table>
    <button type="submit">Login</button>
</form>

가상 돔인 Vue에 맞게 직접 Document에 접근($refs)하지 않고 v-model로 값을 갖고 올 수 있습니다. 버튼을 눌렀을 때의 처리를 위해 @submit을 사용하였고 .prevent를 사용하여 폼의 기본적인 동작을 차단합니다.(event.preventDefault)

new Vue({
	methods: {
    	login() {
        	axios.post("/login", {
            	id: this.id,
                pw: this.pw
            })
        }
    }
})

button(submit)을 누르게 되면 submit 이벤트가 발생해서 login 이벤트를 수행하게 됩니다.

Form Validation

Form을 전송하기 전에 사용자의 입력이 유효한지 검사는 필수입니다. Vue에서는 vee-validatae, Vuelidate 등의 라이브러리로 폼의 유효성 검사를 할 수 있습니다.

라이브러리를 사용하지 않고 유효성 검사도 처리할 수 있습니다.

<input id="email" v-model="email" type="text">
<small>{{emailValidation}}</small>
new Vue({
	data() {
    	return {
        	email: ""
        }
    },
    computed: {
    	emailValidation() {
        	return this.email.length > 10 ? '' : '10글자 이상 입력해야 합니다.'
        }
	}
})