Cadastro.vue

<template>
  <div class="container-fluid">

    <form>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group" v-bind:class="{ 'has-error': $v.form.name.$error }">
            <label class="control-label" for="name">Nome completo* :</label>
            <input type="text" v-model="form.name" v-on:input="$v.form.name.$touch" v-on:blur="$v.form.name.$touch"
                   v-bind:class="{error: $v.form.name.$error, valid: $v.form.name.$dirty && !$v.form.name.$invalid}"
                   class="form-control" id="name" placeholder="ex. André Fernandes de Souza">
                  <span class="help-block" v-if="!$v.form.name.minLength">Nome precisa ter no mínimo {{$v.form.name.$params.minLength.min}} letras.</span>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group" v-bind:class="{ 'has-error': $v.form.cargo.$error }">
            <label class="control-label" for="cargo">Cargo* :</label>
            <input v-model="form.cargo"
                   v-on:input="$v.form.cargo.$touch" v-on:blur="$v.form.cargo.$touch"
                   v-bind:class="{error: $v.form.cargo.$error, valid: $v.form.cargo.$dirty && !$v.form.cargo.$invalid}"
                   type="text" class="form-control" id="cargo" placeholder="ex. Diretor">
            <span class="help-block" v-if="!$v.form.cargo.minLength">Cargo precisa ter no mínimo {{$v.form.cargo.$params.minLength.min}} letras.</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="form-group" v-bind:class="{ 'has-error': $v.form.company.$error }">
            <label class="control-label" for="company">Instituição onde trabalha* :</label>
            <input type="text" v-model="form.company"
                   v-on:input="$v.form.company.$touch" v-on:blur="$v.form.company.$touch"
                   v-bind:class="{error: $v.form.company.$error, valid: $v.form.company.$dirty && !$v.form.company.$invalid}"
                   class="form-control" id="company" placeholder="ex. Instituto Oncológico">
            <span class="help-block" v-if="!$v.form.company.minLength">A instituição onde trabalha precisa ter no mínimo {{$v.form.company.$params.minLength.min}} letras.</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group" v-bind:class="{ 'has-error': $v.form.cel.$error }">
            <label class="control-label" for="cel">Celular* :</label>
            <masked-input v-model="form.cel" v-on:input="$v.form.cel.$touch" v-on:blur="$v.form.cel.$touch"
                          v-bind:class="{error: $v.form.cel.$error, valid: $v.form.cel.$dirty && !$v.form.cel.$invalid}"
                          class="form-control"  mask="(11) 1111-1111" id="cel" placeholder="ex. (21) 23456-7890" />

            <span class="help-block" v-if="!$v.form.cel.minLength">Celular precisa ter no mínimo {{$v.form.cel.$params.minLength.min}} letras.</span>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group"  v-bind:class="{ 'has-error': $v.form.working_area.$error }">
            <label class="control-label" for="working_area">Área de atuação* :</label>
            <input v-model="form.working_area"
                   v-on:input="$v.form.working_area.$touch" v-on:blur="$v.form.working_area.$touch"
                   v-bind:class="{error: $v.form.working_area.$error, valid: $v.form.working_area.$dirty && !$v.form.working_area.$invalid}"
                   working_area
                   type="text" class="form-control" id="working_area" placeholder="ex. Hospital S.A.">
            <span class="help-block" v-if="!$v.form.working_area.minLength">A instituição onde trabalha precisa ter no mínimo {{$v.form.working_area.$params.minLength.min}} letras.</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label" for="uf">UF onde mora* :</label>
            <v-select id="uf" :selected="form.uf" v-on:input="$v.form.uf.$touch" v-on:blur="$v.form.uf.$touch"
                      v-bind:class="{error: $v.form.uf.$error, valid: $v.form.uf.$dirty && !$v.form.uf.$invalid}"
                      placeholder="Selecione a UF onde mora" :options="estados"></v-select>

          </div>

        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="city">Município onde mora* :</label>
            <input v-model="form.city"
                   v-on:input="$v.form.city.$touch" v-on:blur="$v.form.city.$touch"
                   v-bind:class="{error: $v.form.city.$error, valid: $v.form.city.$dirty && !$v.form.city.$invalid}"
                   city
                   type="text" class="form-control" id="city" placeholder="ex. Hospital S.A.">
          </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group" v-bind:class="{ 'has-error': $v.form.email.$error }">
            <label class="control-label" for="email">E-mail* :</label>
            <input type="text" class="form-control" id="email"
                   v-on:input="$v.form.email.$touch" v-on:blur="$v.form.email.$touch"
                   v-bind:class="{error: $v.form.email.$error, valid: $v.form.email.$dirty && !$v.form.email.$invalid}"
            >
            <span class="help-block" v-if="!$v.form.email.required">O email é obrigatório.</span>
            <span class="help-block" v-if="!$v.form.email.email">O e-mail precisa ser um email válido.</span>
            <span class="help-block" v-if="!$v.form.email.minLength">O e-mail precisa ter 4 letras</span>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label" for="confirm_email">Confirmar e-mail* :</label>
            <input type="text" class="form-control" id="confirm_email"
                   v-on:input="$v.form.confirm_email.$touch" v-on:blur="$v.form.confirm_email.$touch"
                   v-bind:class="{error: $v.form.confirm_email.$error, valid: $v.form.confirm_email.$dirty && !$v.form.confirm_email.$invalid}"
                   placeholder="ex. [email protected]">

          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label" for="password">Senha* :</label>
            <input type="password"
                   v-on:input="$v.form.password.$touch" v-on:blur="$v.form.password.$touch"
                   v-bind:class="{error: $v.form.password.$error, valid: $v.form.password.$dirty && !$v.form.password.$invalid}"
                   class="form-control" id="password" placeholder="ex. (21) 23456-7890">

          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="control-label" for="confirm_password">Confirmar senha* :</label>
            <input type="password"
                   v-on:input="$v.form.confirm_password.$touch" v-on:blur="$v.form.confirm_password.$touch"
                   v-bind:class="{error: $v.form.confirm_password.$error, valid: $v.form.confirm_password.$dirty && !$v.form.confirm_password.$invalid}"
                   class="form-control" v-model="form.confirm_password" id="confirm_password"
                   placeholder="ex. (21) 23456-7890">

          </div>

        </div>
      </div>
      <button type="button" class="btn btn-default">Send invitation</button>
    </form>
    {{form}}
    <br><br>
    <br><br>
  </div>
</template>

<script>
  import vSelect from 'vue-select'
  import {required, minLength, email, sameAs, numeric} from 'vuelidate/lib/validators'
  import MaskedInput from 'vue-masked-input'
  export default {
    name: 'cadastro',
    validator: null,
    components: {vSelect, MaskedInput},
    data () {
      return {
        form: {
          name: '',
          cargo: '',
          company: '',
          cel: '',
          working_area: '',
          uf: '',
          confirmed_email: '',
          city: '',
          email: '',
          password: ''
        },
        estados: [
          {value: 1, label: 'Acre'},
          {value: 2, label: 'Alagoas'},
          {value: 3, label: 'Amazonas'},
          {value: 4, label: 'Amapá'},
          {value: 5, label: 'Bahia'},
          {value: 6, label: 'Ceará'},
          {value: 7, label: 'Distrito Federal'},
          {value: 8, label: 'Espírito Santo'},
          {value: 9, label: 'Goiás'},
          {value: 10, label: 'Maranhão'},
          {value: 11, label: 'Minas Gerais'},
          {value: 12, label: 'Mato Grosso do Sul'},
          {value: 13, label: 'Mato Grosso'},
          {value: 14, label: 'Pará'},
          {value: 15, label: 'Paraíba'},
          {value: 16, label: 'Pernambuco'},
          {value: 17, label: 'Piauí'},
          {value: 18, label: 'Paraná'},
          {value: 19, label: 'Rio de Janeiro'},
          {value: 20, label: 'Rio Grande do Norte'},
          {value: 21, label: 'Rondônia'},
          {value: 22, label: 'Roraima'},
          {value: 23, label: 'Rio Grande do Sul'},
          {value: 24, label: 'Santa Catarina'},
          {value: 25, label: 'Sergipe'},
          {value: 26, label: 'São Paulo'},
          {value: 27, label: 'Tocantins'}]
      }
    },
    validations: {
      form: {
        name: {
          required,
          minLength: minLength(4)
        },
        company: {
          required,
          minLength: minLength(4)
        },
        cel: {
          required,
          minLength: minLength(4)
        },
        uf: {
          numeric: numeric
        },
        city: {
          required,
          minLength: minLength(4)
        },
        working_area: {
          required,
          minLength: minLength(4)
        },
        cargo: {
          required,
          minLength: minLength(4)
        },
        password: {
          required,
          minLength: minLength(4)
        },
        email: {
          email,
          required,
          minLength: minLength(4)
        },
        confirm_email: {
          email,
          sameAsEmail: sameAs('form.email'),
          minLength: minLength(4)
        },
        confirm_password: {
          required,
          email,
          sameAsPassword: sameAs('form.password'),
          minLength: minLength(4)
        }
      }
    }
  }
</script>
<style scoped>
  input {
    border: 1px solid silver;
    border-radius: 4px;
    background: white;
    padding: 5px 10px;
  }

  .error {
    border-color: red;
    background: #FDD;
  }

  .error:focus {
    outline-color: #F99;
  }

  .valid {
    border-color: #5A5;
    background: #EFE;
  }

  .valid:focus {
    outline-color: #8E8;
  }
</style>