Vueでフォーム検証を使用する方法

序章

このような開発者は常にフォームの検証に取り組む必要があるため、ほとんどすべてのWebアプリケーションは何らかの方法でフォームを利用します。 あなたが新しい開発者である場合、これにどのようにアプローチするのが最善かを決めるのは難しいかもしれません。 使用しているスタックに応じて、選択できるオプションが多数あります。

このチュートリアルでは、Vueを使用してフォームにフォーム検証を実装する方法を学習します。

検証はクライアント側で行われるため、ユーザーが送信ボタンを押すとすぐにエラーメッセージを表示します（サーバーに応答を送信する必要はありません）。 クライアント側の検証を行っても、サーバーでリクエストを検証する必要がなくなるわけではありません。これも非常に重要です。

最初の例の作成

それが確立されたら、フォームを作成しましょう。 まず、AppコンポーネントはRegisterコンポーネントのみをレンダリングします。

<div id="app">
  <div>
    <Register />
  </div>
</div>

スクリプトセクションは次のようになります。

new Vue({
  el: "#app"
})

Registerコンポーネントの場合、入力フィールドを持つフォームを表示します。

  <div>
    <h2>Register</h2>

    <form @submit.prevent="register" method="post">
      <div>
        <label>Name:</label>
        <input type="text" v-model="user.name" />
        <div>{{ errors.name }}</div>
      </div>
      <div>
        <label>Phone:</label>
        <input type="text" v-model="user.phone" />
        <div>{{ errors.phone }}</div>
      </div>
      <div>
        <label>Email:</label>
        <input type="text" v-model="user.email" />
        <div>{{ errors.email }}</div>
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="user.password" />
        <div>{{ errors.password }}</div>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>

The .prevent メソッドは、送信が行われたときにフォームのデフォルトの動作を停止するために使用されます。 フォームには、名前、電子メール、電話番号、およびパスワードの4つの入力フィールドがあります。 これらはすべて、独自の検証が必要になります。 いずれかの入力にエラーがある場合は、入力フィールドの下に表示されます。

各フィールドは一意であるため、検証がそれらの一意性と一致するように適合していることを確認する必要があります。 一般的なものは、どのフィールドも空であってはならないということです。 これは、を使用して確認できます !field.length、 どこ field 私たちが持っている入力フィールドのいずれかに相当します。 コードをクリーンに保つために、バリデーターはVueインスタンスの外部で定義されます。 Vue CLIを使用してスキャフォールディングされたアプリでこれを構築している場合は、別のファイルにバリデーターがあることを意味します。

const validateName = name => {
  if (!name.length) {
    return { valid: false, error: "This field is required" };
  }
  return { valid: true, error: null };
};

const validatePhone = phone => {
  if (!phone.length) {
    return { valid: false, error: 'This field is required.' };
  }

  if (!phone.match(/^[+][(]?[0-9]{1,3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm)) {
    return { valid: false, error: 'Please, enter a valid international phone number.' };
  }

  return { valid: true, error: null };
}

const validateEmail = email => {
  if (!email.length) {
    return { valid: false, error: "This field is required" };
  }
  if (!email.match(/^\w+([.-]?\w+)_@\w+(_[_.-]?\w+)_(.\w{2,3})+$/)) {
    return { valid: false, error: "Please, enter a valid email." };
  }
  return { valid: true, error: null };
};

const validatePassword = password => {
  if (!password.length) {
    return { valid: false, error: "This field is required" };
  }
  if (password.length < 7) {
    return { valid: false, error: "Password is too short" };
  }
  return { valid: true, error: null };
};

メールや電話番号などの固有のフィールドについては、正規表現を使用して特定のパターンに一致することを確認します。 各バリデーターは、入力フィールドをパラメーターとして受け取る関数です。 上からわかるように、各関数は valid と error. これは、フォームを送信する必要があるかどうかを判断するために使用するものです。 これが実際に動作していることを確認するために、Registerコンポーネントは次のようになります。

Vue.component('register', {
  template: '#register',
  data() {
    return {
      user: {
        email: '',
        password: '',
        name: '',
        phone: ''
      },
      valid: true,
      success: false,
      errors: {},
      message: null
    }
  },
  methods: {

    register() {
      this.errors = {}

      const validName = validateName(this.user.name);
      this.errors.name = validName.error;
      if (this.valid) {
        this.valid = validName.valid
      }

      const validPhone = validatePhone(this.user.phone);
      this.errors.phone = validPhone.error;
      if (this.valid) {
        this.valid = validPhone.valid
      }

      const validEmail = validateEmail(this.user.email);
      this.errors.email = validEmail.error;
      if (this.valid) {
        this.valid = validEmail.valid
      }

      const validPassword = validatePassword(this.user.password)
      this.errors.password = validPassword.error
      if (this.valid) {
        this.valid = validPassword.valid
      }

      if (this.valid) {
        alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user))
      }
    }
  }
})

バリデーターがいずれかのフィールドに対してエラーを返した場合、返されたエラーはに保存されます。 errors.fieldName-どこ fieldName は入力フィールドの名前であり、ユーザーが何がうまくいかなかったかを確認するために表示されます。

すべてのフィールドが戻ったとき valid なので true、フォームの送信に進むことができます。 このチュートリアルでは、アラートボックスを表示しています。

ジョイを使う

Joiを使用すると、JavaScriptオブジェクトのスキーマを構築できます。これを使用して、入力を検証できます。 ExpressおよびRestifyを操作するときによく使用されます。 このチュートリアルでは、Registerコンポーネントのスキーマを定義することでこれを使用できます。

スキーマは次のとおりです。

import Joi from "joi";

const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm;
const phone = Joi.string().regex(phoneRegex)
  .options({
    language: {
      string: {
        regex: {
          base: 'must be a valid phone number'
        }
      }
    }
  });

const userValidation = {};
userValidation.create = {
  first_name: Joi.string().min(2).max(24).required(),
  email: Joi.string().email().required(),
  password: Joi.string().min(7).required(),
  phone: phone.required()
};

次に、Registerコンポーネントのスキーマを使用して、ユーザーの入力を検証できます。

Vue.component('register', {
  template: '#register',
  data() {
    return {
      user: {
        name: '',
        email: '',
        password: '',
        phone: ''
      },
      valid: false,
      success: false,
      errors: {},
      issues: {}
    }
  },
  methods: {
    // method that validates the user input using the schema
    validate(value, schema) {
      const result = Joi.validate(value, schema, { abortEarly: false });
      if (result.error) {
        result.error.details.forEach((error) => {
          this.issues[error.path[0]] = error.message;
        });
        return false;
      }
      return true;
    },

    register() {
      // validation method is called and passed the inputs and schema
      this.validate(this.user, userValidation.create);
        if (Object.keys(this.issues).length > 0) {
          this.errors = this.issues;
          return false;
        }
        alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user))
    }
  }
})

私たちは宣言します validate ユーザー入力と定義したスキーマを受け入れるメソッド。 検証後にエラーが見つかった場合は、 false 発生したエラー。 エラーがない場合は、以前と同じようにアラートボックスを表示します。

結論

VeeValidateとVuelidateは、Vueアプリケーションでフォーム検証を処理するときにも利用できる代替手段です。