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 システムへのインストール チュートリアル

推薦する

Promise カプセル化 wx.request メソッド

前回の記事では、Promise を使用して小さなプログラム wx.request をカプセル化する実...

Ubuntu 18.04はルート権限を取得し、ルートユーザーとしてログインします

事前に書いておきます:次の手順では、ターミナルにコマンドを入力する必要があります。コンピューターでブ...

CentOS8 Linux 8.0.1905 のインストール手順(図解)

現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....

ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション

これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...

Reactの3つの主要属性におけるpropsの使用の詳細な説明

目次クラスコンポーネント機能コンポーネントプロパティは読み取り専用ですコンポーネント間通信前回は状態...

Matlab による JavaScript プログラミング、重心アルゴリズムによる位置決め学習

目次Matlab セントロイドアルゴリズムMatlab はクローズドな商用ソフトウェアであり、米国政...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...

ドロップダウンリストのJavaScript実装

この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...

MySQL 8.0 で列を素早く追加する方法

序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...

js Promise同時制御メソッド

目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...

MySQL で distinct メソッドを使用する詳細な例

明確な意味: distinctive は、一意のレコードの数を照会するために使用されます。つまり、d...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...