데일리 공부 기록
hands on vue3 - 주어진 소스를 가지고 @blur를 이용한 validation을 해보기
탐훈
2023. 3. 18. 20:53
728x90
[목표]
1) @blur 속성에 대해 익숙해지기
Form에는 이름과 나이를 넣는 input이 있다.
이름과 나이 칸을 비워놓는다면 다음 조건을 만족시켜라
첫째) input박스의 border-color를 red로 하기
둘째) input박스 아래에 p 태그를 이용하여 입력하라는 문구를 적어놓기
아래는 주어진 소스다
해당 소스를 갖고서 수정한 뒤 완료 코드와 비교해보시오
[App.vue]
<template>
<the-form></the-form>
</template>
<script>
import TheForm from './components/TheForm.vue';
export default {
components: {
TheForm
}
}
</script>
<style>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
background-color: #292929;
}
</style>
[TheForm.vue]
<template>
<form @submit.prevent="submitData">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="inputName" />
<p v-if="userInputName == 'invalid'">Please Check Your Name Input</p>
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model="inputAge" />
<p v-if="userInputAge == 'invalid'">Please input your age</p>
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" type="checkbox" value="News" v-model="interst" />
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" type="checkbox" value="Tutorials" v-model="interst" />
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" type="checkbox" value="Nothing" v-model="interest"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" type="radio" value="Video" v-model="how" />
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" type="radio" value="Blogs" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" type="radio" value="Other" v-model="how" />
<label for="how-other">Other</label>
</div>
</div>
<div>
<input type="checkbox" v-model="agreement">
<p>Do you agree with that we can use your private information?</p>
</div>
<div>
<button>Save Data</button>
</div>
</form>
</template>
<script>
export default{
data(){
return{
inputName: '',
inputAge: 0,
interest: [],
how:'',
agreement: null,
};
},
methods: {
submitData(){
console.log(this.inputName);
console.log(this.inputAge + 10);
console.log(this.$refs.userAge.value + 10);
console.log(this.interest);
console.log(this.how);
console.log(this.agreement);
this.inputAge = '';
this.interest = '';
this.how = '';
this.inputName = '';
}
}
}
</script>
<style scoped>
form {
margin: 2rem auto;
max-width: 40rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 2rem;
background-color: #ffffff;
}
.form-control {
margin: 0.5rem 0;
}
.form-control.invalid label{
color: red;
}
.form-control.invalid input{
border-color: red;
}
.form-control.invalid p{
color:red;
}
label {
font-weight: bold;
}
h2 {
font-size: 1rem;
margin: 0.5rem 0;
}
input,
select {
display: block;
width: 100%;
font: inherit;
margin-top: 0.5rem;
}
select {
width: auto;
}
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
width: auto;
margin-right: 1rem;
}
input[type='checkbox'] + label,
input[type='radio'] + label {
font-weight: normal;
}
button {
font: inherit;
border: 1px solid #0076bb;
background-color: #0076bb;
color: white;
cursor: pointer;
padding: 0.75rem 2rem;
border-radius: 30px;
}
button:hover,
button:active {
border-color: #002350;
background-color: #002350;
}
</style>수정 후 소스
[TheForm.vue]
<template>
<form @submit.prevent="submitData">
<div class="form-control" :class="{invalid:userInputName == 'invalid'}">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="inputName" @blur="blurInputName"/>
<p v-if="userInputName == 'invalid'">Please Check Your Name Input</p>
</div>
<div class="form-control" :class="{invalid:userInputAge == 'invalid'}">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model="inputAge" @blur="blurInputAge"/>
<p v-if="userInputAge == 'invalid'">Please input your age</p>
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" type="checkbox" value="News" v-model="interst" />
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" type="checkbox" value="Tutorials" v-model="interst" />
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" type="checkbox" value="Nothing" v-model="interest"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" type="radio" value="Video" v-model="how" />
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" type="radio" value="Blogs" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" type="radio" value="Other" v-model="how" />
<label for="how-other">Other</label>
</div>
</div>
<div>
<input type="checkbox" v-model="agreement">
<p>Do you agree with that we can use your private information?</p>
</div>
<div>
<button>Save Data</button>
</div>
</form>
</template>
<script>
export default{
data(){
return{
inputName: '',
inputAge: 0,
interest: [],
how:'',
agreement: null,
userInputName: 'pending',
userInputAge: 'pending',
};
},
methods: {
blurInputAge(){
if(this.inputAge == ''){
this.userInputAge = 'invalid';
}
if(this.inputAge != ''){
this.userInputAge = 'valid';
}
},
blurInputName(){
if(this.inputName == ''){
console.log("hello");
this.userInputName = 'invalid';
}
if(this.inputName.trim() != ''){
this.userInputName = 'valid';
}
},
submitData(){
console.log(this.inputName);
console.log(this.inputAge + 10);
console.log(this.$refs.userAge.value + 10);
console.log(this.interest);
console.log(this.how);
console.log(this.agreement);
this.inputAge = '';
this.interest = '';
this.how = '';
this.inputName = '';
}
}
}
</script>
<style scoped>
form {
margin: 2rem auto;
max-width: 40rem;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 2rem;
background-color: #ffffff;
}
.form-control {
margin: 0.5rem 0;
}
.form-control.invalid label{
color: red;
}
.form-control.invalid input{
border-color: red;
}
.form-control.invalid p{
color:red;
}
label {
font-weight: bold;
}
h2 {
font-size: 1rem;
margin: 0.5rem 0;
}
input,
select {
display: block;
width: 100%;
font: inherit;
margin-top: 0.5rem;
}
select {
width: auto;
}
input[type='checkbox'],
input[type='radio'] {
display: inline-block;
width: auto;
margin-right: 1rem;
}
input[type='checkbox'] + label,
input[type='radio'] + label {
font-weight: normal;
}
button {
font: inherit;
border: 1px solid #0076bb;
background-color: #0076bb;
color: white;
cursor: pointer;
padding: 0.75rem 2rem;
border-radius: 30px;
}
button:hover,
button:active {
border-color: #002350;
background-color: #002350;
}
</style>