Vueはユーザー名が使用可能かどうかの検証を実装します

Vueはユーザー名が使用可能かどうかの検証を実装します

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

ユーザー名が使用可能であることを確認する

ケース効果

実装手順(アイデア)

1. v-model によるデータバインディング
2. 迅速な情報提供が必要
3. 入力情報の変化を監視するためのリスナーが必要
4. 変更が必要なイベント

さらなる調整は

1. リスナーを使用してユーザー名の変更を監視する
2. ユーザー名が変更された場合(確認のためにバックエンドインターフェースを呼び出す)
3. 検証結果に応じてプロンプト情報を調整する

コード

基本レイアウト

<div id="アプリ">
  <span>ユーザー名:</span>
  <span>
   <input type="text" v-model.lazy="uname">
  </span>
  <span>
   {{ヒント}}
  </span>
</div>

リスナーを通じて特定の機能を実装する

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* リスナーはリスナーを使用してユーザー名の変更を監視します。ユーザー名が変更された場合(検証のためにバックグラウンドインターフェースを呼び出します)
  検証結果に応じてプロンプト情報を調整する*/
  var vm = 新しい Vue({
   el: "#app",
   データ: {
    名前: ''、
    ヒント: ''
   },
   メソッド: {
    checkName: 関数 (uname) {
     // インターフェイスを呼び出しますが、スケジュールされたタスクを使用してインターフェイス呼び出しをシミュレートできます。var that = this;
     setTimeout(関数() {
      // インターフェース呼び出しをシミュレートする if (uname == 'admin') {
       that.tip = 'ユーザー名は既に存在します。変更してください'
      } それ以外 {
       that.tip = 'ユーザー名は使用できます'
      }
     }, 1000)
    }
   },
   時計:
    uname: 関数 (val) {
     //バックエンド インターフェイスを呼び出して、ユーザー名の正当性を確認します。this.checkName(val);
     this.tip = '確認中...'
    }
   },

  });
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • オンライン食品配達アプリケーションの Go+Vue 開発プロセス (ユーザー名、パスワード、グラフィック検証コード)
  • Vue+element-uiはランダム検証コード+ユーザー名+パスワードフォーム検証機能を統合します
  • ユーザー名が使用可能かどうかを確認するVueメソッド

<<:  Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

>>:  Linux での crontab スケジュール実行コマンドの詳細な説明

推薦する

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

CentOS8でyumソースを変更した後にウェアハウスキャッシュの同期に失敗する問題の詳細な説明

問題の原因: 最初は CentOS 8 のデフォルトの yum ソースを正常に使用できますが、次のコ...

Nginx 経由で Tomcat9 クラスターを構築し、セッション共有を実現する

Nginx を使用して Tomcat9 クラスターを構築し、Redis を使用してセッション共有を実...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

リフレッシュリダイレクトを実現する HTML ヘッドタグメタ

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

DockerにTomcat8をインストールする方法

1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...

CSS パフォーマンスの最適化 - will-change の使用方法の詳細な説明

will-change は、要素にどのような変更が行われるかをブラウザに伝え、ブラウザが事前に最適化...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

MySQL での大規模トランザクションによって発生する挿入の遅延ケースの分析

【質問】 INSERT 文は最も一般的な SQL 文の 1 つです。最近、MySQL サーバーが同時...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

コピー&ペーストはパッケージングの敵です

OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...