Signup.html

<form method="POST" @submit="validateBeforeSubmit">
    <span>Name</span>
     <input type="text" class="formText"  v-model.trim="user.username">     
     <p class="bind-error" v-show="validation.hasError('user.username')">{{validation.firstError('user.nickname')}}</p>
</form>

Signup.js

import Vue from 'vue'
import SimpleVueValidator from 'simple-vue-validator'
import * as CustomValidator from './validator'

Vue.use(SimpleVueValidator)

new Vue({
  el: '.container',
  data() {
    return {
      user: {
        username: ''
      }
    }
  },

  validators: {    
    'user.nickname': CustomValidator.Nickname 
  },
  methods: {
    validateBeforeSubmit(event) {
      this.$validate()
      .then(function(success) {
        if(!success)
          event.preventDefault();
      })
      
    } 
  }
});

validator.js

import { Validator } from 'simple-vue-validator'

const PATTERN = {
  MONEY: /(^[+-]?\d+)(\d{3})/,
  USERNAME: /^[a-zA-Z0-9]{4,20}/,
  PASSWORD: /^.*(?=.{5,15})(?=.*\d)(?=.*[a-z|A-Z]).*$/
}

export function Username(value) {
  return Validator.value(value)
    .required('* Username is required')
    .regex(PATTERN.USERNAME, 'Alphabet/Number in a 4-20 Characters')
}