Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue

<Vorlage>
	<p Klasse="Anmelden">
		<el-tabs v-model="aktiverName" @tab-click="handleClick">
			<el-tab-pane label="Anmelden" name="Vorname">
				<el-form :model="ruleForm" :rules="Regeln" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="Name" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
 
					<el-form-item label="Passwort" prop="pass"><el-input type="passwort" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
 
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">Anmelden</el-button>
 
						<el-button @click="resetForm('ruleForm')">Zurücksetzen</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
 
			<el-tab-pane label="Registrieren" name="Sekunde">
				<registrieren></registrieren>
			</el-tab-pane>
		</el-tabs>
	</p>
</Vorlage>
 
<Skript>
Register aus „@/components/register“ importieren;
 
Standard exportieren {
	Daten() {
		var validatePass = (Regel, Wert, Rückruf) => {
			wenn (Wert === '') {
				Rückruf (neuer Fehler (,,Bitte geben Sie Ihr Passwort ein‘‘));
			} anders {
				wenn (this.ruleForm.checkPass !== '') {
					dies.$refs.ruleForm.validateField('checkPass');
				}
 
				Rückruf();
			}
		};
 
		zurückkehren {
			aktiverName: "Vorname",
			RegelForm: {
				Name: '',
				passieren: '',
				checkPass: ''
			},
			Regeln:
				Name: [{ erforderlich: true, Nachricht: ,Bitte geben Sie Ihren Namen ein‘, Auslöser: ,Verwischen‘ }, { min: 2, max: 5, Nachricht: ,Länge muss zwischen 2 und 5 Zeichen liegen‘, Auslöser: ,Verwischen‘ }],
				pass: [{ erforderlich: true, Validator: validatePass, Auslöser: 'blur' }]
			}
		};
	},
 
	Methoden: {
		//Tab-Umschalten handleClick(tab, event) {},
		//Formular zurücksetzen resetForm(formName) {
			dies.$refs[formName].resetFields();
		},
		//Formular absenden submitForm(formName) {
			dies.$refs[formName].validate(valid => {
				if (gültig) {
					diese.$nachricht({
						Typ: "Erfolg",
						Meldung: „Anmeldung erfolgreich“
					});
					dies.$router.push('home');
				} anders {
					console.log('Fehler beim Senden!!');
					gibt false zurück;
				}
			});
		}
	},
	Komponenten:
		registrieren
	}
};
</Skript>
 
<style lang="scss">
.Anmelden {
	Breite: 400px;
	Rand: 0 automatisch;
}
 
.el-tabsitem {
	Textausrichtung: zentriert;
	Breite: 60px;
}
</Stil>

//Komponente registrieren <template>
	<el-form :model="ruleForm" :rules="Regeln" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="Benutzername" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
		<el-form-item label="Passwort" prop="pass"><el-input type="passwort" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
		<el-form-item label="Passwort bestätigen" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">Registrieren</el-button>
			<el-button @click="resetForm('ruleForm')">Zurücksetzen</el-button>
		</el-form-item>
	</el-form>
</Vorlage>
 
<Skript>
Standard exportieren {
	Daten() {
		var validatePass = (Regel, Wert, Rückruf) => {
			wenn (Wert === '') {
				Rückruf (neuer Fehler (,,Bitte geben Sie Ihr Passwort ein‘‘));
			} anders {
				wenn (this.ruleForm.checkPass !== '') {
					dies.$refs.ruleForm.validateField('checkPass');
				}
				Rückruf();
			}
		};
 
		var validatePass2 = (Regel, Wert, Rückruf) => {
			wenn (Wert === '') {
				callback(new Error('Bitte geben Sie Ihr Passwort erneut ein'));
			} sonst wenn (Wert !== this.ruleForm.pass) {
				callback(new Error('Die doppelt eingegebenen Passwörter stimmen nicht überein!'));
			} anders {
				Rückruf();
			}
		};
 
		zurückkehren {
			activeName: "zweiter",
			RegelForm: {
				Name: '',
				passieren: '',
				checkPass: ''
			},
			Regeln:
				Name: [{ erforderlich: true, Nachricht: ,Bitte geben Sie Ihren Namen ein‘, Auslöser: ,Verwischen‘ }, { min: 2, max: 5, Nachricht: ,Länge muss zwischen 2 und 5 Zeichen liegen‘, Auslöser: ,Verwischen‘ }],
				pass: [{ erforderlich: true, Validator: validatePass, Auslöser: 'blur' }],
				checkPass: [{ erforderlich: true, Validator: validatePass2, Auslöser: 'blur' }]
			}
		};
	},
 
	Methoden: {
		Formular absenden(Formularname) {
			dies.$refs[formName].validate(valid => {
				if (gültig) {
					diese.$nachricht({
						Typ: "Erfolg",
						Meldung: „Registrierung erfolgreich“
					});
					// this.activeName: 'Erster',
				} anders {
					console.log('Fehler beim Senden!!');
					gibt false zurück;
				}
			});
		},
 
		Formular zurücksetzen(Formularname) {
			dies.$refs[formName].resetFields();
		}
	}
};
</Skript>

<Vorlage>
  <el-row Typ="flex" rechtfertigen="Mitte">
   <el-form ref="formData" :model="formData" :rules="Regeln" label-width="80px" @keyup.enter.native="login()">
    <el-form-item prop="userName" label="Benutzername"><el-input v-model="formData.userName" placeholder="Bitte geben Sie Ihren Benutzernamen ein" prefix-icon="icon-login_user" löschbar></el-input></el-form-item>
    <el-form-item prop="password" label="Passwort"><el-input v-model="formData.password" placeholder="Bitte geben Sie Ihr Passwort ein" type="password" prefix-icon="icon-login_pwd" löschbar></el-input></el-form-item>
    </el-form-item>
    <el-form-item><el-button type="primary" class="btn" @click="login('formData')" icon="el-icon-upload">Anmelden</el-button>
     <el-button @click="resetForm('formData')">Zurücksetzen</el-button></el-form-item></el-form-item>
     <router-link to="register">Kein Passwort? Registrieren</router-link>
   </el-form>
  </el-row>
</Vorlage>
<Skript>
Standard exportieren {
 Daten() {
  zurückkehren {
   formData: {
    Benutzername: '',
    Passwort: ''
   },
   Regeln:
    Benutzername: [{ erforderlich: true, Nachricht: ‚Benutzername darf nicht leer sein‘, Auslöser: ‚unscharf‘ }],
    Passwort: [{ erforderlich: true, Nachricht: ‚Das Passwort darf nicht leer sein‘, Auslöser: ‚unscharf‘ }]
   }
  };
 },
 Methoden: {
  login(Formularname) {
 
    dies.$refs[formName].validate(valid => {
				if (gültig) {
					diese.$nachricht({
						Typ: "Erfolg",
						Meldung: „Anmeldung erfolgreich“
          });
           dies.$router.push({name:'home'});
				} anders {
					console.log('Fehler beim Senden!!');
					gibt false zurück;
				}
			});
  },
   Formular zurücksetzen(Formularname) {
			dies.$refs[formName].resetFields();
		}
 }
};
</Skript>

<Vorlage>
  <el-row Typ="flex" rechtfertigen="Mitte">
   <el-form ref="formData" :model="formData" :rules="Regeln" label-width="80px" @keyup.enter.native="register()">
    <el-form-item prop="userName" label="Benutzername"><el-input v-model="formData.userName" placeholder="Bitte geben Sie Ihren Benutzernamen ein" prefix-icon="icon-login_user" löschbar></el-input></el-form-item>
    <el-form-item prop="password" label="Passwort"><el-input v-model="formData.password" placeholder="Bitte geben Sie Ihr Passwort ein" type="password" prefix-icon="icon-login_pwd" löschbar></el-input></el-form-item>
    <el-form-item prop="cheackPassword" label="Passwort bestätigen"><el-input v-model="formData.cheackPassword" placeholder="Passwort erneut eingeben" type="password" prefix-icon="icon-login_pwd" löschbar></el-input></el-form-item>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="register('formData')" icon="el-icon-upload">Registrieren</el-button>
      <el-button @click="resetForm('formData')">Zurücksetzen</el-button></el-form-item>
     <router-link to="login">Sie haben bereits ein Passwort? Anmelden</router-link>
 
   </el-form>
  </el-row>
</Vorlage>
<Skript>
Standard exportieren {
 Daten() {
   var validatePass = (Regel, Wert, Rückruf) => {
			wenn (Wert === '') {
				callback(new Error('Bitte geben Sie Ihr Passwort erneut ein'));
			} sonst wenn (Wert !== this.formData.password) {
				callback(new Error('Die doppelt eingegebenen Passwörter stimmen nicht überein!'));
			} anders {
				Rückruf();
			}
		};
 
  zurückkehren {
   formData: {
    Benutzername: '',
    Passwort: '',
    checkPassword:''
   },
   Regeln:
    Benutzername: [{ erforderlich: true, Nachricht: ‚Benutzername darf nicht leer sein‘, Auslöser: ‚unscharf‘ }],
    Passwort: [{ erforderlich: true, Nachricht: ‚Passwort darf nicht leer sein‘, Auslöser: ‚unscharf‘ }],
    checkPassword: [{ erforderlich: true, Validator: validatePass, Auslöser: 'blur' }]
 
   }
  };
 },
 Methoden: {
  registrieren(Formularname) {
   dies.$refs[formName].validate(valid => {
				if (gültig) {
					diese.$nachricht({
						Typ: "Erfolg",
						Meldung: „Registrierung erfolgreich“
          });
           dies.$router.push({name:'login'});
				} anders {
					console.log('Fehler beim Senden!!');
					gibt false zurück;
				}
			});
  },
  Formular zurücksetzen(Formularname) {
			dies.$refs[formName].resetFields();
		}
 
 }
};
</Skript>