We will create a signup form with Email, Password, Role, Education etc.
First on all install the vue cli
npm install -g @vue/cliNow create a vue project from the cli
vue create web-formNow cd into web-form directory
Here you can start the web server using below command
nom run serveNow lets start building the vue Signup form
First go to src/components directory, you can delete the HelloWord.vue component as we will create signup form component.
Create a new file SignUp.vue
Start adding the form elements in the template section as below:
<template>
<form>
<label>Email :</label>
<input type="email" required>
<label>Password :</label>
<input type="password" required>
<label>Role :</label>
<select>
<option value="designer">Web Designer</option>
<option value="developer">Web Developer</option>
</select>
<div>
<input type="checkbox" value="highschool" >
<label>High School</label>
<input type="checkbox" value="bechelors" >
<label>Bachelor's Degree</label>
<input type="checkbox" value="masters" >
<label>Master's Degree</label>
</div>
<div>
<input type="checkbox" required>
<label>Please accept terms and conditions</label>
</div>
<div class="button">
<button class="submit" type="submit">Sign up here</button>
</div>
</form>
</form>
</template>
Now in the <script> section
We can define all the form elements to bind them through the v-model directive
data() {
return {
email: '',
password: '',
role: 'designer',
education: [],
terms: false,
}
},These fields can be mapped to the form fields in template section as below:
<template>
<div>
<form >
<label>Email :</label>
<input type="email" v-model="email" required>
<label>Password :</label>
<input type="password" v-model="password" required>
<label>Role :</label>
<select v-model="role">
<option value="designer">Web Designer</option>
<option value="developer">Web Developer</option>
</select>
<div>
<input type="checkbox" value="highschool" v-model="education" >
<label>High School</label>
<input type="checkbox" value="bechelors" v-model="education" >
<label>Bachelor's Degree</label>
<input type="checkbox" value="masters" v-model="education" >
<label>Master's Degree</label>
</div>
<div>
<input type="checkbox" v-model="terms" required>
<label>Please accept terms and conditions</label>
</div>
<div class="button">
<button class="submit" type="submit">Sign up here</button>
</div>
</form>
<p> Email: {{ email }} </p>
<p> Password: {{ password }} </p>
<p> Role: {{ role }} </p>
<p> Education: <span v-for="edu in education" :key="edu"> {{ edu }}</span></p>
<p> Terms : {{ terms }} </p>
</div>
</template>
To get all the details for education array, v-for directive is used.
Now we can validate if password is less than 6 characters or not. To di this we can have onclick event when the form is submitted and then we do the ]validation with handleSubmit function – @submit.prevent=”handleSubmit”
handleSubmit() {
//Validate password field length
this.passwordError = this.password.length > 6 ?
'' : 'Password should be more than 6 characters long!';
}
<form @submit.prevent="handleSubmit">Here is the final code for SignUp.vue for the template section
<template>
<div>
<form @submit.prevent="handleSubmit">
<label>Email :</label>
<input type="email" v-model="email" required>
<label>Password :</label>
<input type="password" v-model="password" required>
<div v-if="passwordError" class="error">{{ passwordError }} </div>
<label>Role :</label>
<select v-model="role">
<option value="designer">Web Designer</option>
<option value="developer">Web Developer</option>
</select>
<div>
<input type="checkbox" value="highschool" v-model="education" >
<label>High School</label>
<input type="checkbox" value="bechelors" v-model="education" >
<label>Bachelor's Degree</label>
<input type="checkbox" value="masters" v-model="education" >
<label>Master's Degree</label>
</div>
<div>
<input type="checkbox" v-model="terms" required>
<label>Please accept terms and conditions</label>
</div>
<div class="button">
<button class="submit" type="submit">Sign up here</button>
</div>
</form>
<p> Email: {{ email }} </p>
<p> Password: {{ password }} </p>
<p> Role: {{ role }} </p>
<p> Education: <span v-for="edu in education" :key="edu"> {{ edu }}</span></p>
<p> Terms : {{ terms }} </p>
</div>
</template>
Javascript code
<script>
export default{
data() {
return {
email: '',
password: '',
role: 'designer',
education: [],
terms: false,
passwordError: ''
}
},
methods: {
handleSubmit() {
//Validate password field length
this.passwordError = this.password.length > 6 ?
'' : 'Password should be more than 6 characters long!';
if(!this.passwordError) {
console.log(this.email);
console.log(this.password);
console.log(this.role);
console.log(this.education);
console.log(this.terms);
}
}
}
}
</script>
You can also add some css styles for the SignUp.vue <style> section
<style scoped>
form {
max-width: 600px;
margin: 30px auto;
background: #fff;
text-align: left;
padding: 20px;
border-radius: 10px;
}
label {
color: #aaa;
display:inline-block;
margin: 25px 0 15px;
text-transform: uppercase;
}
input, select {
display: block;
padding: 10px 6px;
width: 100%;
box-sizing: bordre-box;
border: none;
border-bottom: 1px solid #ddd;
color: #555;
}
input[type="checkbox"] {
display: inline-block;
width:16px;
margin: 0 10px 0;
position: relative;
top: 2px;
}
.pill {
display: inline-block;
margin: 20px 10px 0 0 ;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
background: #eee;
}
button {
background: rgb(7, 24, 7);
border: 0;
padding: 10px 20px;
color: white;
border-radius: 20px;
}
.submit {
text-align: center;
}
.error {
color: #ff0000;
margin-top: 10px;
font-size: 0.8em;
font-weight: bold;
}
</style>Now you can register this component in the main App.vue file as below:
App.vue
<template>
<div id="app">
<SignupForm msg="Sign Up Form"/>
</div>
</template>
<script>
import SignupForm from './components/SignupForm.vue'
export default {
name: 'App',
components: {
SignupForm
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
body {
margin: 0;
background: #eee;
}
</style>
The Final SignUp.vue will look like this:
<template>
<div>
<form @submit.prevent="handleSubmit">
<label>Email :</label>
<input type="email" v-model="email" required>
<label>Password :</label>
<input type="password" v-model="password" required>
<div v-if="passwordError" class="error">{{ passwordError }} </div>
<label>Role :</label>
<select v-model="role">
<option value="designer">Web Designer</option>
<option value="developer">Web Developer</option>
</select>
<div>
<input type="checkbox" value="highschool" v-model="education" >
<label>High School</label>
<input type="checkbox" value="bechelors" v-model="education" >
<label>Bachelor's Degree</label>
<input type="checkbox" value="masters" v-model="education" >
<label>Master's Degree</label>
</div>
<div>
<input type="checkbox" v-model="terms" required>
<label>Please accept terms and conditions</label>
</div>
<div class="button">
<button class="submit" type="submit">Sign up here</button>
</div>
</form>
<p> Email: {{ email }} </p>
<p> Password: {{ password }} </p>
<p> Role: {{ role }} </p>
<p> Education: <span v-for="edu in education" :key="edu"> {{ edu }}</span></p>
<p> Terms : {{ terms }} </p>
</div>
</template>
<script>
export default{
data() {
return {
email: '',
password: '',
role: 'designer',
education: [],
terms: false,
passwordError: ''
}
},
methods: {
handleSubmit() {
//Validate password field length
this.passwordError = this.password.length > 6 ?
'' : 'Password should be more than 6 characters long!';
if(!this.passwordError) {
console.log(this.email);
console.log(this.password);
console.log(this.role);
console.log(this.education);
console.log(this.terms);
}
}
}
}
</script>
<style scoped>
form {
max-width: 600px;
margin: 30px auto;
background: #fff;
text-align: left;
padding: 20px;
border-radius: 10px;
}
label {
color: #aaa;
display:inline-block;
margin: 25px 0 15px;
text-transform: uppercase;
}
input, select {
display: block;
padding: 10px 6px;
width: 100%;
box-sizing: bordre-box;
border: none;
border-bottom: 1px solid #ddd;
color: #555;
}
input[type="checkbox"] {
display: inline-block;
width:16px;
margin: 0 10px 0;
position: relative;
top: 2px;
}
.pill {
display: inline-block;
margin: 20px 10px 0 0 ;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
background: #eee;
}
button {
background: rgb(7, 24, 7);
border: 0;
padding: 10px 20px;
color: white;
border-radius: 20px;
}
.submit {
text-align: center;
}
.error {
color: #ff0000;
margin-top: 10px;
font-size: 0.8em;
font-weight: bold;
}
</style>
Hope this is helpful 🙂