イエネル/ January 8, 2020/ Others/ 0 comments

こんにちは、今日はVue.jsでフォームバリデーションのこと書きます。

とりあえず、フォームを作成します。

<form id="app" @submit="checkForm" action="https://vuejs.org/" method="post" novalidate="true">
  <p v-if="errors.length">
    <b>下記のエラーを修正して下さい:</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>
  <p>
    <label for="name">名前</label>
    <input id="name" v-model="name" type="text" name="name">
  </p>
  <p>
    <label for="age">年齢</label>
    <input id="age" v-model="age" type="number" name="age" min="0">
  </p>
  <p>
    <label for="movie">映画</label>
    <select id="movie" v-model="movie" name="movie">
      <option>Star Wars</option>
      <option>John Wick</option>
      <option>The Matrix</option>
    </select>
  </p>
  <p>
    <input type="submit" value="送信">
  </p>
</form> 

HTMLフォームに書いてある「novalidate=”true”」の目的はブラウザーのバリデーションをバイパスするためでした。novalidate=”true”を追加で入れない場合は、私たちの作ったバリデーションコードを実行する前にブラウザー自分でバリデーション起こします。
次は、Vue.jsコードを書きます。

const app = new Vue({
  el: '#app',
  data: {
    errors: [],
    name: null,
    email: null,
    movie: null
  },
  methods: {
    checkForm: function (e) {
      this.errors = [];

      if (!this.name) {
        this.errors.push("名前は必須項目です。");
      }
      if (!this.email) {
        this.errors.push('メールアドレスは必須項目です。d.');
      } else if (!this.validEmail(this.email)) {
        this.errors.push('メールアドレスのフォーマットは正しいではありません。');
      }

      if (!this.errors.length) {
        return true;
      }

      e.preventDefault();
    },
    validEmail: function (email) {
      var re = /^(([^<>()[\]\\.,;:\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,}))$/;{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
})

これだけです。
フォームの送信ボタン押すとVue.jsのcheckFormメソッドは実行してバリデーションします。

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>
*
*