フロントエンドのバリデーションを hapi の joi で行うと手軽で便利 ref: https://qiita.com/potato4d/items/e2c88c940516aeb369b0

index.html

<div id="app">
  <form>
    <p>
      <label for="user_id">UserID</label>
      <input @blur="validate('user_id')" type="text" v-model="formData.user_id" id="user_id">
      <span class="error" v-if="errors.user_id"><br>ユーザーIDが不正です</span>
    </p>

      <p>
      <label for="email">Eメールアドレス</label>
      <input @blur="validate('email')" v-model="formData.email" type="text" id="user_id">
      <span class="error" v-if="errors.email"><br>メールアドレスが不正です</span>
    </p>

    <p>
      <label for="password">パスワード</label>
      <input @blur="validate('password')" v-model="formData.password" type="text" id="password">
      <span class="error" v-if="errors.password"><br>パスワードが不正です</span>
    </p>

    <p>
      <input type="submit" :disabled="!isValid">
    </p>
    </form>
</div>

index.js

new Vue({
  el: '#app',
  data () {
    return {
      formData: {
        user_id: '',
        email: '',
        password: ''
      },
      errors: {
        user_id: false,
        email: false,
        password: false
      },
      touched: {
        user_id: false,
        email: false,
        password: false
      }
    }
  },
  methods: {
    validate (name) {
      this.touched[name] = true
      Object.keys(this.errors).forEach((k)=>{
        this.errors[k] = false
      })
      const result = Joi.validate({...this.formData}, this.schema, { abortEarly: false })
      console.log(result)
      if (result.error) {
        result.error.details.forEach((detail) => {
          const name = detail.path[0]
          if(this.touched[name]) this.errors[name] = true
        })
      }
    }
  },
  computed: {
    isValid () {
      let isValid = true

      Object.entries(this.errors).forEach(([k,v]) => {
        if(v) isValid = false
      })
      Object.entries(this.touched).forEach(([k,v]) => {
        if(!v) isValid = false
      })
      return isValid
    },
    schema () {
      return Joi.object().keys({
        user_id: Joi.string().required(),
        email: Joi.string().email(),
        password: Joi.string().min(12).required()
      })
    }
  }
})

JavaScript

import Joi from 'joi-browser'

result.error.details

[
  {
    "message": "\"email\" must be a valid email",
    "path": [
      "email"
    ],
    "type": "string.email",
    "context": {
      "value": "invalid_string",
      "key": "email",
      "label": "email"
    }
  },
  {
    "message": "\"password\" length must be at least 12 characters long",
    "path": [
      "password"
    ],
    "type": "string.min",
    "context": {
      "limit": 12,
      "value": "12345678",
      "key": "password",
      "label": "password"
    }
  }
]

shell

$ yarn add joi-browser

terminal

$ node index.js | jq