Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

1. はじめに

この記事は前回の記事「Vue Element-ui フォーム検証ルール、どれを知っていますか?」です。 》マルチフィールドジョイント検証の代表的なアプリケーション。

パスワードを変更する場合、通常は 2 つの属性フィールドを使用して、パスワードが一貫していることを 2 回確認する必要があります。 2 つの属性フィールドが関係する同様の状況は次のとおりです。

  • 日付と時刻の範囲。両方に値がある場合、終了時刻 >= 開始時刻という要件が適用されます。
  • 数量関係: 数量の下限値 <= 数量の上限値。

両方の属性値が可変であるのが特徴です。この論文では、2 つのパスワードを検証する一貫性アプリケーションを使用して、可変属性値の 2 つのフィールド間の共同検証の一般的なソリューションを提供します。

2. ソリューションの実装

2.1 実装コード

まずフォームコードを指定します:

<テンプレート>
  <div id="コンテンツラッパー">
    <h5 class="heading" align=left>ユーザー管理/パスワードの変更</h5>
    <!-- セパレータ -->
    <el-divider></el-divider>    
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="元のパスワード:" prop="oldPasswd">
        <el-input v-model="form.oldPasswd" :type="パスワード">
          <!-- 入力にアイコンを追加するには、slot="suffix" 属性が必要です。そうしないと、アイコンが表示されません -->
          <i slot="サフィックス" :class="icon" @click="パスワードを表示"></i>
        </el-input>
      </el-form-item>   
      <el-form-item label="新しいパスワード:" prop="newPasswd">
        <el-input v-model="form.newPasswd" :type="パスワード">
          <i slot="サフィックス" :class="icon" @click="パスワードを表示"></i>
        </el-input>
      </el-form-item>   
      <el-form-item label="パスワードの確認:" prop="confirmPasswd">
        <el-input v-model="form.confirmPasswd" :type="パスワード">
          <i slot="サフィックス" :class="icon" @click="パスワードを表示"></i>
        </el-input>
      </el-form-item>   
      <el-form-item>
        <el-button type="primary" style="width:160px" size="small" @click="submit()">OK</el-button>
        <el-button type="primary" style="width:160px" size="small" @click="cancel()">キャンセル</el-button>
      </el-form-item>      
    </el-form>
  </div>
</テンプレート>
<スクリプト>
  '@/common/validator.js' から {passwordValidator} をインポートします。
  エクスポートデフォルト{
    データ() {
      // 2 つのパスワードを比較して同じかどうかを確認します const comparePasswdValidator = (rule, value, callback) => {
        // 値を取得するメソッドを取得します var getvaluesMethod = rule.getValuesMethod;
        //オブジェクトの値を取得するには getvaluesMethod メソッドを呼び出します var formData = getvaluesMethod();
        
        // 1 つは空です。値が入力されていない可能性があります。現時点では比較は行われません。if (formData.newPasswd == '' || formData.confirmPasswd == ''){
          コールバック() を返します。
        }

        //==================================================================
        // 2 つのパスワードを比較します // 両方に値があり、比較します if (formData.newPasswd == formData.confirmPasswd){
          // 新しいパスワードは確認済みのパスワードと一致しています // まず、2 つのパスワードの確認警告プロンプトをクリアします。現在、他のパスワードの不一致プロンプトをクリアします this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
          折り返し電話();
        }それ以外{
          callback(new Error('2つのパスワードが一致しません'));
        }
      }

      戻る {
        形状 : {
          古いパスワード: ''
          新しいパスワード: ''
          パスワードの確認: ''
        },
        //入力タイプのパスワードを変更するために使用します: "password",  
        //入力アイコンを置き換えるために使用されます: "el-input__icon el-icon-view", 
        // 検証ルールの設定ルール: {
          古いパスワード: [
            {必須: true、メッセージ: 「パスワードは空欄にできません」、トリガー: 'blur'}
          ]、          
          新しいパスワード: [
            {必須: true、メッセージ: 「新しいパスワードは空欄にできません」、トリガー: 'blur'}、
            {最小: 6、最大: 18、メッセージ: "新しいパスワード 6〜18 桁"、トリガー: 'blur'}、
            {バリデータ: passwordValidator、トリガー: 'blur'},
            {バリデータ: comparePasswdValidator、トリガー: 'blur'、'getValuesMethod': this.getValuesMethod},
          ]、     
          パスワードの確認: [
            {必須: true、メッセージ: 「パスワードの確認は空欄にできません」、トリガー: 'blur'}、
            {最小: 6、最大: 18、メッセージ: "6〜18桁のパスワードを確認してください"、トリガー: 'blur'}、
            {バリデータ: passwordValidator、トリガー: 'blur'},
            {バリデータ: comparePasswdValidator、トリガー: 'blur'、'getValuesMethod': this.getValuesMethod},
          ]、                   
        },        
      }
    },
    メソッド: {
      // 値を取得するためのメソッド。複数フィールドの共同検証を必要とするすべてのバリデーターには getValuesMethod() を使用します {
        this.form を返します。
      },

      //パスワードを非表示および表示するshowPassword(){
        //アイコンをクリックするとパスワードが非表示または表示されます if( this.password=="text"){
            this.password="パスワード";
            //アイコンを変更する this.icon="el-input__icon el-icon-view";
        }それ以外 {
            this.password="テキスト";
            this.icon="el-input__icon el-icon-stopwatch";
        }
      },
      
      //送信するsubmit(){
        _this = this とします。
        this.$refs['form'].validate(valid => {
          // 検証に合格した場合は true、失敗した場合は false
          (有効)の場合{
            _this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => {
              if (res.data.code == _this.global.SucessRequstCode){
                // 変更が成功したことを伝えるアラート("パスワードのリセットが成功しました!");
                // ホームページにジャンプします this.$router.push({
                  パス: '/home',
                });                
              }それ以外{
                if (!_this.commonFuncs.isInterceptorCode(res.data.code)){
                  アラート(res.data.message);
                }
              }              
            }).catch(エラー => {
              コンソール.log(エラー);
            }); 
          }          
        })
      },

      //キャンセル cancel(){
        // ホームページにジャンプします this.$router.push({
          パス: '/home',
        });            
      }
    }
  }
</スクリプト>

インポートされた外部バリデータ passwordValidator は、/src/common/validator.js ファイルにあります。コードは次のとおりです。

/* パスワード検証 */
エクスポート関数 passwordValidator(ルール、値、コールバック) {
  定数reg = /^[_a-zA-Z0-9@.#%&*!\-\$^]+$/;
  if(値 == '' || 値 == 未定義 || 値 == null){
    折り返し電話();
  } それ以外 {
    if (!reg.test(値)){
      callback(new Error('パスワードは、英語の文字、数字、および次の文字で構成されています: @.#%&*!_-$^'));
    } それ以外 {
      折り返し電話();
    }
  }
}

2.2 コードの説明

2.2.1. ルールの設定:

  // 検証ルールの設定ルール: {
      古いパスワード: [
        {必須: true、メッセージ: 「パスワードは空欄にできません」、トリガー: 'blur'}
      ]、          
      新しいパスワード: [
        {必須: true、メッセージ: 「新しいパスワードは空欄にできません」、トリガー: 'blur'}、
        {最小: 6、最大: 18、メッセージ: "新しいパスワード 6〜18 桁"、トリガー: 'blur'}、
        {バリデータ: passwordValidator、トリガー: 'blur'},
        {バリデータ: comparePasswdValidator、トリガー: 'blur'、'getValuesMethod': this.getValuesMethod},
      ]、     
      パスワードの確認: [
        {必須: true、メッセージ: 「パスワードの確認は空欄にできません」、トリガー: 'blur'}、
        {最小: 6、最大: 18、メッセージ: "6〜18桁のパスワードを確認してください"、トリガー: 'blur'}、
        {バリデータ: passwordValidator、トリガー: 'blur'},
        {バリデータ: comparePasswdValidator、トリガー: 'blur'、'getValuesMethod': this.getValuesMethod},
      ]、                   
    },

焦点は newPasswd 属性と confirmPasswd 属性にあります。両方に同じルール セットが設定されており、検証ルールは次のとおりです。

  • 値を空にすることはできません。
  • 値の長さは 6 〜 18 文字にする必要があります。
  • パスワードは passwordValidator ルールに準拠しています。つまり、パスワードは英語の文字、数字、および次の文字で構成されます: @.#%&*!_-$^。
  • パスワード検証ツール comparePasswdValidator を比較します。この検証ツールはカスタム属性 getValuesMethod を追加します。属性値はこの getValuesMethod メソッドです。これはメソッド名ではなくメソッドであることに注意してください。このルールでは、メソッドに getValuesMethod メソッドがあり、comparePasswdValidator バリデーターが実装されていることが要求されます。

これらのルールは連携して動作します。属性チェックが合格する前にすべてのルールがチェックに合格する必要があり、検出順序は配列の順序で実行されます。

検証ルールでは、両方のフィールドの属性値が可変であるため、newPasswd 属性と confirmPasswd 属性の両方が同じ comparePasswdValidator で構成されます。 comparePasswdValidator は最後のルールなので、まず前の検証ルールを満たす必要があります。

2.2.2、getValuesMethod メソッド

// 値を取得するためのメソッド。複数フィールドの共同検証を必要とするすべてのバリデーターには getValuesMethod() を使用します {
    this.form を返します。
  },

getValuesMethod メソッドは、フォーム データ オブジェクトをデータに返します。これは非常に鋭い操作であり、グローバルデータプローブを提供することに相当します。データのフォームデータオブジェクトはバリデータでアクセスでき、フォームのv-modalモデルにより、データのリアルタイム性が保証されます。つまり、他の属性の最新の値を取得できないことを心配する必要はありません。 getValuesMethod メソッドは、データ バインディングの代替アイデアを提供します。

2.2.3. 比較パス検証

  // 2 つのパスワードを比較して同じかどうかを確認します const comparePasswdValidator = (rule, value, callback) => {
    // 値を取得するメソッドを取得します var getvaluesMethod = rule.getValuesMethod;
    //オブジェクトの値を取得するには getvaluesMethod メソッドを呼び出します var formData = getvaluesMethod();
    
    // 1 つは空です。値が入力されていない可能性があります。現時点では比較は行われません。if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      コールバック() を返します。
    }

    //==================================================================
    // 2 つのパスワードを比較します // どちらにも値があり、比較します if (formData.newPasswd == formData.confirmPasswd){
      // 新しいパスワードは確認済みのパスワードと一致しています // まず、2 つのパスワードの確認警告プロンプトをクリアします。現在、他のパスワードの不一致プロンプトをクリアします this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      折り返し電話();
    }それ以外{
      callback(new Error('2つのパスワードが一致しません'));
    }
  }

設定されたカスタム ルール属性 'getValuesMethod' は this.getValuesMethod を指すメソッドであるため、属性はメソッドとして呼び出すことができます。

 // 値を取得するメソッドを取得します var getvaluesMethod = rule.getValuesMethod;
    //オブジェクトの値を取得するには getvaluesMethod メソッドを呼び出します var formData = getvaluesMethod();

メソッド属性を呼び出した結果として、this.form を指すデータ オブジェクトが返されるため、オブジェクトの属性に自由にアクセスできます。

2 つを比較する前に、一方が空であることが判明した場合は、その方が返されます。現在の属性が入力された後、もう一方の端の属性にはまだ値が入力されていない可能性があるため、この時点では比較を行わないでください。

// 1 つは空です。値が入力されていない可能性があります。現時点では比較は行われません。if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      コールバック() を返します。
    }

2 つのパスワードの比較:

  //==================================================================
    // 2 つのパスワードを比較します // どちらにも値があり、比較します if (formData.newPasswd == formData.confirmPasswd){
      // 新しいパスワードは確認済みのパスワードと一致しています // まず、2 つのパスワードの確認警告プロンプトをクリアします。現在、他のパスワードの不一致プロンプトをクリアします this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      折り返し電話();
    }それ以外{
      callback(new Error('2つのパスワードが一致しません'));
    }

2 つのパスワードを比較します。2 つのパスワードが同じ場合は、アラームが出力されます。パスワードが一致している場合は、まず相手側の警告プロンプトをクリアする必要があります。この時点で相手側で「2 つのパスワードが一致していません」というプロンプトが表示される場合があります。

// まず、2 つのパスワードの検証警告プロンプトをクリアします。現在、他のパスワードの矛盾したプロンプトをクリアします this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);

clearValidate メソッドは、1 つ以上の検証ルール属性の例外プロンプトをクリアする要素フォーム メソッドです。

このとき、「事故による殺人」は起こるのでしょうか?つまり、クリア操作により、反対側の他の異常なプロンプトもクリアされます。 2 つのパスワードが同じであり、2 つの検証ルールが同じであることを考慮すると、この検証ルールは最後にランク付けされているため、検出順序では最後に実行されます。つまり、この検証が実行されると、他のチェックは合格したことになります。したがって、このような「事故による殺人」は起こりません。実際の実施効果は同じです。

さらに、次のコードは上記の clearValidate 呼び出しステートメントを置き換えるために使用できないことに注意してください。

  // ピア検証を実行します if (rule.field == 'newPasswd')
          {
            // 現在の属性がnewPasswdの場合
            this.$refs['form'].validateField('confirmPasswd');
          }それ以外{
            this.$refs['form'].validateField('newPasswd');
          }

この時点では検証が実行されているため、ピア検証を再度呼び出すと、ピアは comparePasswdValidator を呼び出します。ピア検証の結果、2 つのパスワードが一致していることが示されるため、ピア (ピアのピア、つまりピア自体) が再度検証のために呼び出され、無限ループが形成され、呼び出しスタックがオーバーフローします。したがって、バリデーター コードでは、validateField メソッドを再度呼び出さないようにしてください。

2.3 検証結果

以下にいくつかのレンダリングを示します。

初期状態:

確認パスワードを変更し、入力フォーカスを残します。

新しいパスワード入力ボックスに入力し、情報を入力せずに入力フォーカスをそのままにします。

確認パスワードを修正し、最後の文字「8」を削除して入力フォーカスを離すと初期状態に戻ります。

これで、Vue の 2 フィールド共同検証の典型的な例であるパスワードの変更に関するこの記事は終了です。Vue のパスワード変更に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは個人情報の閲覧とパスワードの変更機能を実装しています
  • Vue 要素検証の例
  • eslint コード検証をキャンセルする vue-cli3 ソリューション
  • Vue でよく使用される検証ルール (サンプルコード)
  • vue入力タグ一般命令検証の実装
  • Vue で携帯電話番号認証のサンプルコードを実装する (手ぶれ補正機能の適用シナリオ)

<<:  ElasticSearch と ElasticSearch-Head の Docker デプロイメントの実装

>>:  MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストール チュートリアル

推薦する

効率を向上できる Linux コマンドエイリアス 10 個のまとめ

序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...

MySQL をベースにしたシンプルな検索エンジンを実装する

目次MySQL ベースの検索エンジンの実装1. ngram全文パーサー2. 全文インデックスを作成す...

Spring Boot + jar パッケージングのデプロイメント Tomcat 404 エラーの問題を解決する

1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...

Docker ベースの ELK を素早く構築する方法

[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...

Nginx ログ出力のリクエスト後パラメータを設定する方法

【序文】当プロジェクトの SMS 機能は、第三者に接続することです。第三者からの元の受信確認要求は ...

JavaScript の基本変数

目次1. 変数の概要1.1 変数のメモリへの保存1.2 変数の使用1. 変数を宣言する2. 譲渡3....

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

アイデア展開Tomcatサービス実装プロセス図

まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...

Nginx セッション共有問題の解決策の分析

この記事は主に、Nginx セッション共有の問題に対する解決策を紹介します。記事内のサンプル コード...

MySQL5.7.17 winx64 インストール バージョン構成方法 Windows Server 2008 R2 でのグラフィック チュートリアル

参考までに、Winでmysql5.7をインストールします。具体的な内容は次のとおりです。 @Auth...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...

Linuxロスレス展開方法

概要クラウド プラットフォームのお客様のサーバーでは、業務量が拡大し続けるとディスク容量が不足する場...

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

MySQL 5.7.21 解凍版インストール Navicat データベース操作ツールインストール

MySQL解凍版とNavicatデータベース操作ツールのインストールは、以下のとおりです。 1. M...