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

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

  // 検証ルールの設定ルール: {
      古いパスワード: [
        {必須: 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 を返します。
  },

  // 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つのパスワードが一致しません'));
    }
  }

 // 値を取得するメソッドを取得します 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つのパスワードが一致しません'));
    }

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

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