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 スケジュール実行コマンドの詳細な説明

推薦する

Nginx の動的および静的分離実装ケースのコード分析

静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

JavaScript クロージャの詳細

目次1. クロージャとは何ですか? 2. 閉鎖の役割序文: JavaScript部分ではクロージャが...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

JS に依存せずにレスポンシブ レイアウトを実現する CSS3 モバイル vw+rem メソッド

1. はじめに(1)vw/vhの紹介使用する前に、vw と rem とは何か、その機能について簡単に...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...

div画像マーキーシームレス接続実装コード

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

CentOS 6.5 の設定 ssh キーフリーログインで pssh コマンドを実行する方法の説明

1. psshを確認してインストールします。yum list pssh 2. キーレスログインが設定...

プロファイルを使用して遅い SQL を分析する MySQL の詳細な説明 (グループ左結合はサブクエリよりも効率的です)

プロファイルを使用して遅いSQLを分析するMySQL の SQL パフォーマンス アナライザーの主な...

JavaScript で 24 以上の配列メソッドを手動で実装する

目次1. トラバーサルクラス1. 各2. 地図3. すべての4. いくつか5. フィルター6. 減ら...

JSが絵柄デジタル時計を実現

この記事の例では、画像デジタル時計を実現するためのJSの具体的なコードを参考までに共有しています。具...

CSSの省略記号とパディングを組み合わせた場合の問題の詳細な説明

CSS によるテキストの切り捨てテキストを自動的に切り捨てるスタイル コードを実装するには、次のコー...

MySQL OOM (メモリオーバーフロー) の解決策

OOM は「Out Of Memory」の略で、メモリオーバーフローを意味します。メモリ オーバーフ...

怖いハロウィーン Linux コマンド

ハロウィーンではありませんが、Linux の不気味な側面に注目する価値はあります。幽霊、魔女、ゾンビ...

jsで照明スイッチを制御する

参考までに、jsを使用して照明スイッチを制御します。具体的な内容は次のとおりです。トピック: js ...