Form Validation with input attribute with Vue.js

by bc_rikko

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div id="app">
  <form @submit.prevent="onsubmit">
    <div class="form-group">
      <label>Name</label>
      <input
        class="form-control"
        v-model="form.name"
        type="text"
        required
        placeholder="bc_rikko">
    </div>
    <div class="form-group">
      <label>Birth date</label>
      <input
        class="form-control"
        v-model="form.birth"
        type="date">
    </div>
    <div class="form-group">
      <label>Age</label>
      <input
        class="form-control"
        v-model="form.age"
        type="number"
        min="0"
        max="999"
        placeholder="19">
    </div>
    <div class="form-group">
      <label>Email address</label>
      <input
        class="form-control"
        v-model="form.email"
        type="email"
        placeholder="love-vuejs@example.com">
    </div>
    <div class="form-group">
      <label>Blog URL</label>
      <input
        class="form-control"
        v-model="form.blog"
        type="url"
        placeholder="https://kuroeveryday.blogspot.com">
    </div>
    <div class="form-group">
      <label>ID</label>
      <input
        class="form-control"
        v-model="form.id"
        type="text"
        title="Custome ID(xxxx9999)"
        pattern="^[a-z]{4}[0-9]{4}$"
        placeholder="xxxx9999">
    </div>

    <div class="form-group">
      <button
        class="btn btn-primary"
        type="submit">Submit</button>
    </div>
  </form>
  <pre>{{ result }}</pre>
</div>

CSS

body {
  padding: 20px;
}

JavaScript

// import vue@2.5.2, bootstrap@4.0.0-beta.2
new Vue({
  el: "#app",
  data () {
    return {
      form: {},
      result: {}
    }
  },
  methods: {
    onsubmit () {
      this.result = Object.assign({}, this.form);
    }
  }
});