イエネル/ February 7, 2020/ Others/ 0 comments

こんにちは、今回VUE.JSでプラグイン使ってフォームバリデーションします。

バリデーションする為に、必要プラグインは vee-validate です。

下記のNPMコマンド実行して、プラグインをダウンロードします。

npm i vee-validate --save

次は、 vee-validate を私たちのプロジェクトで使える為にインポートします。

user_form.vue
<template>
  <div>
    <form @submit.prevent="onSubmit">
      <span>電話番号</span>
      <RequiredOptionLabel v-bind:isRequired="true"/>
      <ValidationProvider rules="phone" v-slot="{ errors }">
        <TextInput placeholder="例:0000000000" 
          v-model="userData.phoneNo"
          hide-errors-on="never" :errors="generateErr(errors, server_errors.phone_no)"
          @keyup="inputKeyUp('phone_no', errors)" />
      </ValidationProvider>
    </form>
  </div>
</template>
<script>
import ErrorMessage from '../components/ErrorMessage.vue'
import { enableAllRules } from '../plugins/Validation'
import RequiredOptionLabel from '../components/RequiredOptionLabel.vue'
import TextInput from '../components/TextInput.vue'
import { ValidationProvider} from 'vee-validate'
export default {
  name: 'App',
  components: {
    ErrorMessage,
    RequiredOptionLabel,
    TextInput,
    ValidationProvider,
  },
  data () {
    return {
      userData: {
        phoneNo: '',
      }
    }
  },
  created () {
    enableAllRules()
  },
  methods: {
    inputKeyUp: function (data, errors) {
      if (this._.isEmpty(errors)) {
        let clone = this._.cloneDeep(this.server_errors)
        delete clone[data]
        this.server_errors = clone
      }
    },
    generateErr: function (first, second) {
      return (!this._.isEmpty(first) && first) || second
    },
  },
}
</script>

バリデーションスクリプトはこちらです。

validation.js
import { extend } from 'vee-validate'

export const enablePhoneRule = () => {
    extend('phone', {
        message: '電話番号は9~16桁にする必要があります。',
        validate: (value) => {
            return /^\d{9,16}$/.test(value)
        }
    })
}

export const enableAllRules = () => {
    enablePhoneRule()
}

このコードを実行するとエラーの場合 ’電話番号は9~16桁にする必要があります。’表示します。

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*