vue がフォーカスチェックを失う-フロントエンドQ&A-php.cn

vue がフォーカスチェックを失う

WBOY

リリース： 2023-05-27 17:18:10

オリジナル

1061 人が閲覧しました

Vue.js は、シングルページアプリケーションや動的 Web アプリケーションの開発に広く使用されている人気の JavaScript フレームワークで、シンプル、柔軟、効率的です。 Vue.js アプリケーションの開発では、ユーザー入力データの正確性を保証するためにフォーカス損失チェック機能を実装することが必要になることがよくあります。この記事では、Vue.js でロストフォーカス検査機能を実装する方法を紹介します。

Vue.js フォーム検証

Vue.js には、入力データを簡単に検証できるフォーム検証関数が多数用意されています。 Vue.js フォーム検証は次の方法で実装できます:

属性バインディング: v-bind ディレクティブを使用して属性値をバインドし、属性値を指定して入力値を検証します。
リスナー: リスナーを使用して、入力値の変化を監視し、エラープロンプトを表示します。
カスタム命令: 開発者が入力値を検証するための命令をカスタマイズできるようにします。

ロストフォーカス検査の実装

ロストフォーカス検査機能を Vue.js に実装するにはどうすればよいですか?実装プロセスは次のとおりです:

最初のステップは、入力ボックスコンポーネントで検証ルールを定義することです:

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" v-model="name" v-on:blur="checkName" />
    <span v-show="nameError" style="color: red;">请输入正确的姓名</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        nameError: false
      }
    },
    methods: {
      checkName() {
        var reg = /^[u4e00-u9fa5]{2,4}$/;
        if (!reg.test(this.name)) {
          this.nameError = true;
        } else {
          this.nameError = false;
        }
      }
    }
  }
</script>

ログイン後にコピー

2 番目のステップは、検証メソッドをグローバルに共有するグローバルミックスインを作成することです:

Vue.mixin({
  methods: {
    checkValidate() {
      const refs = this.$refs;
      for (const ref in this.$refs) {
        if (refs.hasOwnProperty(ref)) {
          const element = refs[ref][0];
          if (element && element.required) {
            element.validate();
          }
        }
      }
    }
  }
})

ログイン後にコピー

3 番目のステップは、フォームの送信時に checkValidate メソッドを呼び出すことです:

<template>
  <div>
    <form action="/add" method="post" v-on:submit.prevent="checkValidate">
      <AddInput ref="addInput"></AddInput>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

ログイン後にコピー

上記のステップを通じて、フォーカスの喪失検査機能を実現できます。入力ボックスがフォーカスを失うと、検証のために checkName メソッドが実行されます。フォームが送信されると、checkValidate メソッドが呼び出されてフォームが検証され、ユーザーが入力したデータが正しいかどうかが確認されます。

以上がvue がフォーカスチェックを失うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。