Gemeinsame Überprüfung beider Vue-Felder zur Realisierung der Kennwortänderungsfunktion

<Vorlage>
  <div id="Inhaltswrapper">
    <h5 class="heading" align=left>Benutzerverwaltung/Passwort ändern</h5>
    <!-- Trennzeichen -->
    <el-Teiler></el-Teiler>    
    <el-form ref="form" :model="form" :rules="Regeln" label-width="100px">
      <el-form-item label="Ursprüngliches Passwort:" prop="oldPasswd">
        <el-input v-model="form.oldPasswd" :Typ="Passwort">
          <!-- Um der Eingabe ein Symbol hinzuzufügen, müssen Sie über das Attribut slot="suffix" verfügen, sonst kann das Symbol nicht angezeigt werden-->
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-Eingabe>
      </el-form-item>   
      <el-form-item label="Neues Passwort:" prop="newPasswd">
        <el-input v-model="form.newPasswd" :Typ="Passwort">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-Eingabe>
      </el-form-item>   
      <el-form-item label="Passwort bestätigen:" prop="confirmPasswd">
        <el-input v-model="form.confirmPasswd" :Typ="Passwort">
          <i slot="suffix" :class="icon" @click="showPassword"></i>
        </el-Eingabe>
      </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()">Abbrechen</el-button>
      </el-form-item>      
    </el-form>
  </div>
</Vorlage>
<Skript>
  importiere {passwordValidator} aus '@/common/validator.js'
  Standard exportieren {
    Daten() {
      // Zwei Passwörter vergleichen um zu sehen ob sie gleich sind const comparePasswdValidator = (rule, value, callback) => {
        // Methode zum Abrufen von Werten abrufen var getvaluesMethod = rule.getValuesMethod;
        //Rufen Sie die Methode getvaluesMethod auf, um den Objektwert abzurufen. var formData = getvaluesMethod();
        
        // Eines ist leer, möglicherweise wurde kein Wert eingegeben, kein Vergleich zu diesem Zeitpunkt if (formData.newPasswd == '' || formData.confirmPasswd == ''){
          Rückruf zurückgeben();
        }

        //==================================================================
        // Zwei Passwörter vergleichen // Beide haben Werte, vergleichen, wenn (formData.newPasswd == formData.confirmPasswd){
          // Das neue Passwort stimmt mit dem bestätigten Passwort überein // Löschen Sie zuerst die Warnmeldungen zur Überprüfung der beiden Passwörter. Löschen Sie jetzt die inkonsistente Meldung des anderen Passworts this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
          Rückruf();
        }anders{
          callback(new Error('Die beiden Passwörter stimmen nicht überein'));
        }
      }

      zurückkehren {
        bilden : {
          altesPasswort: '',
          neuesPasswort: '',
          Passwort bestätigen: ''
        },
        //Dient zum Ändern des Eingabetyps Passwort: „password“,  
        //Wird verwendet, um das Symbol im Eingabesymbol zu ersetzen: "el-input__icon el-icon-view", 
        // Konfigurationsregeln für die Überprüfungsregel: {
          altesPasswort: [
            {erforderlich: true, Nachricht: „Das Passwort darf nicht leer sein“, Auslöser: ‚blur‘}
          ],          
          neuesPasswort: [
            {erforderlich: true, Nachricht: „Das neue Passwort darf nicht leer sein“, Auslöser: ‚blur‘},
            {min: 6, max: 18, Nachricht: "Neues Passwort 6-18 Ziffern", Auslöser: 'blur'},
            {validator: passwordValidator, Auslöser: "blur"},
            {Validator: comparePasswdValidator, Auslöser: "unscharf", "getValuesMethod": this.getValuesMethod},
          ],     
          Passwort bestätigen: [
            {erforderlich: true, Nachricht: „Das Kennwort darf nicht leer sein“, Auslöser: ‚blur‘},
            {min: 6, max: 18, Nachricht: "Passwort bestätigen (6-18 Ziffern)", Auslöser: 'blur'},
            {validator: passwordValidator, Auslöser: "blur"},
            {Validator: comparePasswdValidator, Auslöser: "unscharf", "getValuesMethod": this.getValuesMethod},
          ],                   
        },        
      }
    },
    Methoden: {
      // Methode zum Abrufen von Werten. Verwenden Sie getValuesMethod() für alle Validierer, die eine gemeinsame Validierung mehrerer Felder erfordern {
        gib dieses Formular zurück;
      },

      //Passwort ausblenden und anzeigenshowPassword(){
        //Klicken Sie auf das Symbol, um das Passwort auszublenden oder anzuzeigen, if( this.password=="text"){
            this.password="Passwort";
            //Symbol ändern this.icon="el-input__icon el-icon-view";
        }anders {
            dieses.Passwort="Text";
            this.icon="el-input__icon el-icon-Stoppuhr";
        }
      },
      
      //Senden submit(){
        lass _this = dies;
        dies.$refs['form'].validate(valid => {
          // Wenn die Überprüfung erfolgreich war, ist es wahr, wenn sie fehlschlägt, ist es falsch
          if (gültig) {
            _this.instance.changePasswd(_this.$baseUrl,_this.form).then(res => {
              wenn (res.data.code == _this.global.SucessRequstCode){
                // Meldung, dass die Änderung erfolgreich war alert("Das Zurücksetzen des Passworts war erfolgreich!");
                // Zur Startseite springen this.$router.push({
                  Pfad: '/home',
                });                
              }anders{
                wenn (!_this.commonFuncs.isInterceptorCode(res.data.code)){
                  Alarm (res.data.message);
                }
              }              
            }).fangen(Fehler => {
              konsole.log(Fehler);
            }); 
          }          
        })
      },

      //Abbrechen cancel(){
        // Zur Startseite springen this.$router.push({
          Pfad: '/home',
        });            
      }
    }
  }
</Skript>

/* Passwortüberprüfung */
Exportfunktion passwordValidator(Regel, Wert, Rückruf) {
  const reg = /^[_a-zA-Z0-9@.#%&*!\-\$^]+$/;
  wenn(Wert == '' || Wert == undefiniert || Wert == null){
    Rückruf();
  } anders {
    wenn (!reg.test(Wert)){
      callback(new Error('Das Passwort besteht aus englischen Buchstaben, Zahlen und den folgenden Zeichen: @.#%&*!_-$^'));
    } anders {
      Rückruf();
    }
  }
}

  // Konfigurationsregeln für die Überprüfungsregel: {
      altesPasswort: [
        {erforderlich: true, Nachricht: „Das Passwort darf nicht leer sein“, Auslöser: ‚blur‘}
      ],          
      neuesPasswort: [
        {erforderlich: true, Nachricht: „Das neue Passwort darf nicht leer sein“, Auslöser: ‚blur‘},
        {min: 6, max: 18, Nachricht: "Neues Passwort 6-18 Ziffern", Auslöser: 'blur'},
        {validator: passwordValidator, Auslöser: "blur"},
        {Validator: comparePasswdValidator, Auslöser: "unscharf", "getValuesMethod": this.getValuesMethod},
      ],     
      Passwort bestätigen: [
        {erforderlich: true, Nachricht: „Das Kennwort darf nicht leer sein“, Auslöser: ‚blur‘},
        {min: 6, max: 18, Nachricht: "Passwort bestätigen (6-18 Ziffern)", Auslöser: 'blur'},
        {validator: passwordValidator, Auslöser: "blur"},
        {Validator: comparePasswdValidator, Auslöser: "unscharf", "getValuesMethod": this.getValuesMethod},
      ],                   
    },

// Methode zum Abrufen von Werten. Verwenden Sie getValuesMethod() für alle Validierer, die eine gemeinsame Validierung mehrerer Felder erfordern {
    gib dieses Formular zurück;
  },

  // Zwei Passwörter vergleichen um zu sehen ob sie gleich sind const comparePasswdValidator = (rule, value, callback) => {
    // Methode zum Abrufen von Werten abrufen var getvaluesMethod = rule.getValuesMethod;
    //Rufen Sie die Methode getvaluesMethod auf, um den Objektwert abzurufen. var formData = getvaluesMethod();
    
    // Eines ist leer, möglicherweise wurde kein Wert eingegeben, kein Vergleich zu diesem Zeitpunkt if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      Rückruf zurückgeben();
    }

    //==================================================================
    // Zwei Passwörter vergleichen // Beide haben Werte, vergleichen, wenn (formData.newPasswd == formData.confirmPasswd){
      // Das neue Passwort stimmt mit dem bestätigten Passwort überein // Löschen Sie zuerst die Warnmeldungen zur Überprüfung der beiden Passwörter. Löschen Sie jetzt die inkonsistente Meldung des anderen Passworts this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      Rückruf();
    }anders{
      callback(new Error('Die beiden Passwörter stimmen nicht überein'));
    }
  }

 // Methode zum Abrufen von Werten abrufen var getvaluesMethod = rule.getValuesMethod;
    //Rufen Sie die Methode getvaluesMethod auf, um den Objektwert abzurufen. var formData = getvaluesMethod();

// Eines ist leer, möglicherweise wurde kein Wert eingegeben, kein Vergleich zu diesem Zeitpunkt if (formData.newPasswd == '' || formData.confirmPasswd == ''){
      Rückruf zurückgeben();
    }

  //==================================================================
    // Zwei Passwörter vergleichen // Beide haben Werte, vergleichen, wenn (formData.newPasswd == formData.confirmPasswd){
      // Das neue Passwort stimmt mit dem bestätigten Passwort überein // Löschen Sie zuerst die Warnmeldungen zur Überprüfung der beiden Passwörter. Löschen Sie jetzt die inkonsistente Meldung des anderen Passworts this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);
      Rückruf();
    }anders{
      callback(new Error('Die beiden Passwörter stimmen nicht überein'));
    }

// Löschen Sie zuerst die Warnmeldungen zur Überprüfung der beiden Passwörter. Löschen Sie jetzt die inkonsistente Meldung des anderen Passworts this.$refs['form'].clearValidate(['newPasswd','confirmPasswd']);

  // Peer-Verifizierung durchführen, wenn (rule.field == 'newPasswd')
          {
            // Wenn das aktuelle Attribut newPasswd ist
            dies.$refs['form'].validateField('confirmPasswd');
          }anders{
            dies.$refs['form'].validateField('newPasswd');
          }