オプションAPIを使用したVue JSフォームの検証

この記事では、Vueでクライアント側の簡単なサインアップフォームを検証する方法について説明します.オプションAPIを使用するjs.

I also have an article on how to do Form Validation using Vue JS 3 Composition API for Sign-up and login pages, in case if you’re interested in that as well.

下の最終出力から見ることができるように、すべての入力フィールドを空にしてサインアップボタンを押すと、エラーメッセージがサインアップの上に表示されます.
間違ったメールアドレスを入力すると、別のバリデーションエラーが発生します.

最後に、パスワードの長さを少なくとも8文字に制限します.
このプロセスでは、方法を示します.

ユーザーフィールドプロパティを入力フィールド

に作成しバインドします

フォームまたはイベント

の内部のボタンにイベントをアタッチします

デフォルトのフォーム提出動作を防止する異なる方法を示します

はすべての入力フィールド

を検証します

は、エラー配列内のすべてのエラーを蓄積し、ビュー

に表示する方法を示します
私は、あなたに彼ら全員を見せるために非常に興奮しています!それは多くのカバーですので、始めましょう.
これはシリーズの一部です、そして、私は私の他の記事のうちの1つで、すでにhow to design a sign-up formをカバーしました.

ユーザーオブジェクトの作成

サインアップで.Vueコンポーネント、テンプレートタグとスタイルタグの間にスクリプトタグを追加します.
次に、エクスポートデフォルトオブジェクトを宣言します.これは、このコンポーネントのJavaScriptコードのすべてを追加する場所です.
次に、オブジェクトを返す関数であるデータモデルを定義します.

<script>
  export default {
    data() {
      return {}
    },
</script>

次に、ユーザーというプロパティを宣言し、ユーザープロパティの値はJavaScriptオブジェクトになります.
そこで、3つのプロパティを作成します.

名

メール

パスワード

<script>
  export default {
    data() {
      return {
        user: {
          name: "",
          email: "",
          password: "",
        },
      };
    },
</script>

必要なプロパティがあるので、先に進みましょう.

ユーザーフィールドを入力フィールドにバインドする

右上の名前入力フィールド、および自己終了角ブラケットの前に移動し、Vモデルのディレクティブを使用して、ユーザー名からNameプロパティをこの名前入力フィールドにバインドします.

<!-- FULL NAME -->
<div class="field">
  <div class="ui left icon input big">
    <i class="user icon"></i>
    <input type="text" placeholder="Full Name" v-model="user.name" />
  </div>
</div>

Note: The .name here must be matched with the name property inside the user object.

他の2つを同じ方法で縛りましょう.

<!-- EMAIL -->
<div class="field">
  <div class="ui left icon input big">
    <i class="mail icon"></i>
    <input type="email" placeholder="Email" v-model="user.email" />
  </div>
</div>
<!-- PASSWORD -->
<div class="field">
  <div class="ui left icon input big">
    <i class="lock icon"></i>
    <input type="password" placeholder="Password" v-model="user.password" />
  </div>
</div>

It’s important to create a property first inside the data() model before binding it to the view, otherwise, Vue will throw the undefined property error which looks something like this.

ボタンをクリックする

次に、「Click」イベントを「Sign Up」ボタンに付けます.
ボタンをクリックしてイベントボタンをクリックします.
そしてsignupButtonPressと呼ばれるコールバック関数を追加します.

<button class="ui button big red fluid" v-bind:click="signUpButtonPressed">SIGN UP</button>

実際には、ボタンにClickイベントをバインドするショートカットがあります.V - BINDを使用する代わりに:クリックすると、私は単にクリックするだけで正確に同じことを行うが、はるかにクリーナー見える.

<button class="ui button big red fluid" @click="signUpButtonPressed">SIGN UP</button>

サインアップコールコール関数の宣言

Vue 2オプションAPIでは、すべての関数をメソッドオブジェクト内で宣言する必要があります.
したがって、メソッドオブジェクトの内部では、signupButtonPressコールバック関数を宣言します.

export default {
  data() {
    ...
  },
  methods: {
    signUpButtonPressed() {
      console.log("Sign up button pressed!")
    }
  }
}

ボタンを操作するかどうかチェックするアプリを実行しましょう.
ターミナルを開けて、プロジェクトディレクトリに行って、NPM Run Devを実行してください.次に、ブラウザ上のURLに行って、サインアップルートに行ってください.
ボタンが押されているかどうかブラウザーコンソールを開けましょう.

ああ待って!何かあった?
二つのことが起こった.ある?マークはURLに加えられ、コンソールログメッセージを見ることができません.
しかし、2度目のサインアップボタンをクリックすると、予想通りにコンソールにメッセージが表示されます.

フォームのデフォルト動作を送信する

しかし、問題はなぜそれが初めて働いていないですか?
最初にサインアップボタンをクリックすると、基本的にページを再読み込みし、GETリクエストを使ってフォームデータを送信しようとします.URLで.
ボタンを押すと、要素の既定の動作です.
ご覧のように、ボタン要素にtype =“submit”属性を追加しなかったとしても、フォームを提出することができます.
また、コンソールメッセージが実際にブラウザコンソールで2番目目に表示され、ページがリロードされるとすぐに消えます.

既定のフォームの服従を防ぐには3つの方法があります.

Clickイベントオブジェクト

でPreventDefault ()メソッドを使用する
クリックイベントをサインアップボタンに付けるとき、防止因子を加える

フォーム要素にSubmitイベントをアタッチするときに、修正修飾子を追加します.また、Clickイベントと同様にPreventDefault ()メソッドも使用できます.

イベントオブジェクトのpreventDefaultメソッド

最初のオプションは、SignupButtonPressコールバック関数に渡されるClickイベントオブジェクトでPreventDefault ()メソッドを呼び出すことです.
Continue Reading...