Form Submit Vue.js 2

by CorFlamberg

HTML

<body>
  <div id="app">
    <form id="myForm" v-on:submit.prevent="addUser">
      <label for="fio">ФИО</label>
      <input id="fio" v-bind:class="{ 'inpt':validation.fio ,'error': !validation.fio }" type="text" v-model="User.fio" name="fio" placeholder="Иванов Иван Иванович">
      <label for="email">Email</label>
      <input id="email" v-bind:class="{ 'inpt':validation.email ,'error': !validation.email }" type="email" v-model="User.email" name="email" placeholder="">
      <label for="phone">Phone</label>
      <input id="phone" v-bind:class="{ 'inpt':validation.phone ,'error': !validation.phone }" type="phone" v-model="User.phone" name="phone" placeholder="+7(999)999-99-99">
      <ul class="errors">
        <li v-show="!validation.fio">Введите ФИО</li>
        <li v-show="!validation.email">Введите email</li>
        <li v-show="!validation.phone">Введите телефон</li>
      </ul>
      <input id="submitButton" type="submit" value="Submit">
    </form>
    <div id="resultContainer">
      <h3>Результат:</h3>
      <ul>
        <li v-for="user in users">
          {{ users }}
        </li>
      </ul>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

CSS

#app {
  width: 500px;
}

.error {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid red
}

.errors {
  color: red;
}

.inpt {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 150px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

JavaScript

var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
var phoneRE = /\+[7]\([0-9]{3}\)[0-9]{3}-[0-9]{2}-[0-9]{2}/
var userRE = /([А-ЯЁ][а-яё]+[\-\s]?){3,}/

var app = new Vue({
  el: '#app',
  data: {
    User: {
      fio: '',
      email: '',
      phone: ''
    },
    users: []
  },
  computed: {
    validation: function() {
      return {
        fio: userRE.test(this.User.fio),
        email: emailRE.test(this.User.email),
        phone: phoneRE.test(this.User.phone)
      }
    }
  },
  methods: {
    addUser: function() {
      this.users.push(this.User);
      console.log(this.users);
    }
  }
})